默认滚动条样式丑嘛就不谈了~这里修改为个性化滚动条样式.

CSS代码



/*滚动条整体样式*/
body::-webkit-scrollbar {
    width: 10px;
    height: 1px;
}
/*滚动条滑块*/
body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #E5848B;
}
/*滚动条轨道*/
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
    border-radius: 10px;
    background: #FDFAF1;
}


 

效果图

设置cnblogs默认滚动条样式_css

 

原谅我用了这骚气的少女粉~童鞋当然也可以通过拾色器或别的工具自定义滑块及滑道的颜色.这里有个rgb转换网站, 可以说肥肠好用了~​​​​

 设置cnblogs默认滚动条样式_滑块_02

 

 

感谢:​​https://www.jianshu.com/p/da5d52630f36​​


作者：习惯沉淀

如果文中有误或对本文有不同的见解，欢迎在评论区留言。