滚动条是一个伪元素，可以自定义样式。这个伪类可以将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 {
   /*当焦点不在当前区域滑块的状态*/

}

更多参考：http://edu.cnzz.cn/201212/836936e7.shtml

自定义 页面滚动条