滚动条是一个伪元素，可以自定义样式。这个伪类可以将webkit自身的滚动条渲染关闭，只按照用户自定义的css信息进行渲染。
/* 滚动条 */
::-webkit-scrollbar{ height:7px; width:10px;} //宽度也可用百分比定义
//滚动条里面的滑块
::-webkit-scrollbar-thumb{
min-height:30px;
background: rgba(0,0,0,.5);
border-radius: 100px;
box-shadow: 0 0 1px 1px rgba(255,255,255,0.25);
}
::-webkit-scrollbar-thumb:hover{ background: rgba(0,0,0,.7); }
::-webkit-scrollbar-thumb:active{ background: rgba(0,0,0,.8); }
// 滚动条轨道
//:horizontal(horizontal伪类适用于任何水平方向上的滚动条)
//:vertical(vertical伪类适用于任何垂直方向的滚动条)
::-webkit-scrollbar-track:vertical {
background:-webkit-gradient(linear, 0 0, 100% 0, from(rgba(0,0,0,.13)), to(rgba(0,0,0,.13)), color-stop(.5,rgba(0, 0, 0, .05)));
}
::-webkit-scrollbar-track:horizontal{
background:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,.13)), to(rgba(0,0,0,.13)), color-stop(.5,rgba(0, 0, 0, .05)));
}
//表示滚动条的角落是否存在
::-webkit-scrollbar-corner{ background:#e7e7e7;}
::-webkit-scrollbar-thumb:window-inactive {
/*当焦点不在当前区域滑块的状态*/
}
