Webkit 内核浏览器自定义滚动条样式

Webkit 内核浏览器自定义滚动条样式

Webkit在所有浏览器中对于滚动条对自定义支持度最高，也是效果最好的，主要采用带有-webkit-私有前缀伪元素实现

使用示意图

/*1*/
::-webkit-scrollbar{} 
/*2*/
::-webkit-scrollbar-button{}
/*3*/
::-webkit-scrollbar-track{}
/*4*/
::-webkit-scrollbar-track-piece{}
/*5*/
::-webkit-scrollbar-thumb{}
/*6*/
::-webkit-scrollbar-corner{}
/*7*/
::-webkit-scrollbar-resizer{}

如上图所示，用户可以根据自己需要对滚动条各个部分定制样式

说明

以上属性可以满足大部分对需求，但是Webkit浏览器还给我提供了更多对属性供我们使用，真是太贴心。如果有需要可以参考以下文档：
https://webkit.org/blog/363/styling-scrollbars/