一、我们可以使用overflow属性设置是否出现滚动条overflow:scroll /* x y 方向都会*/
或者
overflow-x:scroll; /只是x方向/
或者
overflow-y:scroll; /只是y方向/
当块级内容区域超出块级元素范围的时候,就会以滚动条的形式展示,你可以滚动里面的内容,里面的内容不会超出块级区域范围。
二、使用scrollbar属性设置滚动条样式::-webkit-scrollbar 滚动条整体部分
/* ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 */
&::-webkit-scrollbar {
width: 3px;
height: 3px;
}
/* ::-webkit-scrollbar-thumb 滚动条里面可以拖动的那个 */
&::-webkit-scrollbar-thumb {
border-radius: 2px;
-webkit-box-shadow: inset 0 0 2px #ffffff;
background: #ffffff;
}
/* ::-webkit-scrollbar-track 外层轨道 */
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 2px transparent;
border-radius: 2px;
background: transparent;
}