Skill丨如何利用代码美化网站滚动条？

如何摆脱臃肿的插件,简单代码美化网站滚动条？

V站今天回想起以前模板也有美化滚动条,后来魔改魔改就没了,现在找出来分享出来。由于偏爱谷歌浏览器的简洁，感觉滚动条还是太宽了，用过改变滚动条粗细的插件，后来感觉还是自己修改的舒服，原来也可以放在网站的CSS样式文件中的，所以这种细细的滚动条是我的最爱！把下面的代码放到你网站的CSS样式文件中:

1. /*---滚动条默认显示样式--*/
2. ::-webkit-scrollbar-thumb{
3. background-color:#018EE8;
4. height:50px;
5. outline-offset:-2px;
6. outline:2px solid #fff;
7.    -webkit-border-radius:4px;
8. border: 2px solid #fff;
9. }
10. /*---鼠标点击滚动条显示样式--*/
11. ::-webkit-scrollbar-thumb:hover{
12. background-color:#FB4446;
13. height:50px;
14.    -webkit-border-radius:4px;
15. }
16. /*---滚动条大小--*/
17. ::-webkit-scrollbar{
18. width:8px;
19. height:8px;
20. }
21. /*---滚动框背景样式--*/
22. ::-webkit-scrollbar-track-piece{
23. background-color:#fff;
24.    -webkit-border-radius:0;
25. }

无论是什么站点,都可以。只需要找到合理的位置添加即可！如果没有翻页的,或者有其他美化代码的,尽量不要用或二选一,避免网站CSS臃肿。

效果图: