利用css属性修改滚动条的默认样式

不少小伙伴想必都想修改一下浏览器的默认滚动条样式吧，默认样式看起来确实不太舒服。

下面是默认的滚动条样式，小编仔细看了一下后决定改一下。

默认样式

这是修改之后的样式 看起来是不是很舒服

右侧滚动条已经变成了小清新了。

修改的代码展示

/*滚动条样式*/
body::-webkit-scrollbar {
    width: 4px;    
    /*height: 4px;*/
}
body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);

}

最后给大家说一下滚动条样式控制的代码

主要有以下几大属性

::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的

::-webkit-scrollbar-button 滚动条两端的按钮

::-webkit-scrollbar-track  外层轨道

::-webkit-scrollbar-track-piece  内层滚动槽

::-webkit-scrollbar-thumb 滚动的滑块

::-webkit-scrollbar-corner 边角

::-webkit-resizer 定义右下角拖动块的样式

看了这篇文章，相比对滚动条的属性控制有了一定的认识和了解吧，下次再想修改的时候不会手足无措了，加油！