滚动条样式

系统自带的滚动条样式，可能和我们页面的风格不太相符，Webkit内核及衍生系列的浏览器支持用CSS设定滚动条的样式，能够很容易的实现漂亮的滚动条。

注：Firefox不支持该特性，我们网上看到的一些通用滚动条插件，是用JavaScript实现的虚拟滚动条，有很多不错的插件实现了这一功能，这里不详细介绍了，如果你需要兼顾Firefox那一小部分用户可以考虑。

一个例子

滚动条的设定其实可以这样理解：滚动条组件分为底层、滑轨层、滑块层，它们是三个嵌套的矩形块，我们只要像设置普通div一样，为这些矩形块加上颜色、阴影、圆角、渐变动画之类的设定，就可以实现漂亮的滚动条样式了。

/* 滚动条底层 */
::-webkit-scrollbar {
    width: 10px;
    background-color: rgba(0, 0, 0, 0);
}

/* 滚动条滑轨层 */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0);
}

/* 滚动条滑块层 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

这个效果不是太明显，我就不截图了，大家可以用Chrome随便找个网页，把上述样式代码插入页面试一试。