自定义谷歌浏览器滚动条的样式

在项目中常常会遇到美化浏览器自带滚动条的需求，以下是自定义谷歌浏览器滚动条的样式代码：

::-webkit-scrollbar {
    width: 5px;/*竖向滚动条的宽度*/
    height: 5px;/*横向滚动条的高度*/
}
/*滚动条轨道的样式*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
/*滚动条轨道内滑块的样式*/
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(155,155,155,0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
/*当焦点不在当前区域滑块的状态（具体为什么要加这句有点忘了，记得是跟刷新时有关）*/
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(155,155,155,0.4);
}

更多详细设置，请参考原文：
原文链接：http://www.xuanfengge.com/css3-webkit-scrollbar.html