美化浏览器滚动条

发表于 |

只要修改以下属性即可：

1
2
3
4
5
::-webkit-scrollbar{
            width: 6px;
            height: 6px;
            background: transparent;/*透明*/
        } /*改变整个滚动条的样式*/
1
2
3
4
::-webkit-scrollbar-thumb{
            border-radius: 4px;
            background: transparent;
        } /*改变滚动条上的滚动滑块*/
1
2
3
:hover::-webkit-scrollbar-thumb{
            background: rgba(0,0,0,.2);
        } /*改变滚动条上的滚动滑块*/
1
2
3
:hover::-webkit-scrollbar-track{
            background: rgba(0,0,0,.1);
        } /*改变滚动条轨道*/