自定义谷歌浏览器滚动条的样式

时间:2022-08-30 07:54:50

在项目中常常会遇到美化浏览器自带滚动条的需求,以下是自定义谷歌浏览器滚动条的样式代码:

::-webkit-scrollbar {
    width: 5px;/*竖向滚动条的宽度*/
    height: 5px;/*横向滚动条的高度*/
}
/*滚动条轨道的样式*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
/*滚动条轨道内滑块的样式*/
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(155,155,155,0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
/*当焦点不在当前区域滑块的状态(具体为什么要加这句有点忘了,记得是跟刷新时有关)*/
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(155,155,155,0.4);
}

更多详细设置,请参考原文:
原文链接:http://www.xuanfengge.com/css3-webkit-scrollbar.html