css 自定义滚动条样式

关注

原创最新推荐文章于 2026-06-04 13:44:06 发布 282 阅读 AI 写同款· GEO 优化 ›

CSS3自定义滚动条样式有的公司或许会要求做个好看的滚动条，这时候，我们就需要来自定义滚动条，但是IE跟别的是不一样的。所以，在下面的文章中，会有两种不同的方式来自定义滚动条样式。 webkit浏览器css设置滚动条：（下面是他的7个主要的属性） ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮（滚动条轨阅读详情

说明：

::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式

简单的滚动条

div.scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #fff;
}

div.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    border-radius: 12px;
    background-color: #fff;
}

div.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
    background-color: #bbb;
}