1、::-webkit-scrollbar 滑块的宽度,width是垂直方向的宽度,height是水平方向的宽度; 2、::-webkit-scrollbar-thumb 滑块部分的样式,宽高就不用设置了; 3、::-webkit-scrollbar-track 轨道部分的样式,宽高就不用设置了;只有webkit内核的浏览器支持此样式,pc端有兼容问题,移动端可以使用
例子:
<div id="div1">
<div class="content"></div>
</div>
#div1{
width: 500px;
height: 300px;
overflow: auto;
border: 1px solid #ccc;
}
#div1::-webkit-scrollbar {
width: 8px;
height: 8px;
}
#div1::-webkit-scrollbar-thumb{
background: #ccc;
border-radius: 10px;
}
#div1::-webkit-scrollbar-track {
background: #fff;
box-shadow: inset 0 0 5px #ccc;
border-radius: 10px;
}
.content{
width: 1000px;
height: 500px;
}
![](https://i-blog.csdnimg.cn/blog_migrate/e66f5eff1e8e9ad5a62ab27af1c210ca.png)