html
<div class="scrollbar" style="height: 400px;width: 390px; overflow: scroll">
css样式
.scrollbar::-webkit-scrollbar {
/*滚动条整体样式*/
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.scrollbar::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
background: #9e9e9e;
box-shadow: inset 0 0 5px rgba(0, 122, 204);
}
//滚动条底层颜色!
.scrollbar::-webkit-scrollbar-track {
border-radius: 10px;
background: #ededed;
/*滚动条里面轨道*/
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}
效果图
![](https://img-blog.csdnimg.cn/img_convert/ddd754909c643a48a1c1adf5e7d45e67.png)