设置滚动条样式

js利⽤overflow属性，设置滚动条，隐藏或设置样式

页⾯滚动条设置overflow属性

想要给页⾯哪个部分或者哪个盒⼦添加滚动条，

可以利⽤overflow属性，先看看它的基本属性。

浏览器⽀持情况如上图。

属性值有如下：

想要添加滚动条，必须给盒⼦添加⾼度（*）

例如在x轴上隐藏内容，y轴上显⽰滚动条

.div{

height:300px

overflow-x:hidden;

overflow-y:auto;

}

基本设置

1.可以滚动但是不让显⽰滚动条

.div::-webkit-scrollbar{

display:none;

}

2.⼿动设置滚动条样式

滚动条区域的宽度

.div::-webkit-scrollbar{

width:4px;

}

/*滚动槽的样式设置*/

.div::-webkit-scrollbar-track{

-webkit-box-shadow:inset006pxrgba(255,255,255,0.5);

}

/*滚动条滑块的样式设置*/

.div::-webkit-scrollbar-thumb{

background:rgba(0,0,0,0.1);

-webkit-box-shadow:inset006pxrgba(39,167,148);

}

.div::-webkit-scrollbar-thumb:window-inactive{

background:rgba(255,0,0,0.4);

}

例⼦样式设置的滚动条样式如图：