是不是觉得浏览器自带的滚动条不美观，同时我看到很多网站的自定义滚动条已经变得高端了。 就连chrome32.0开发板都放弃了原来的滚动条，美观多了。 webkit浏览器如何自定义滚动条？
前言
Webkit支持对有overflow属性的区域、列表框、下拉菜单、textarea滚动条自定义样式，所以好处还是蛮大的。 事实上，目前还没有一种兼容所有浏览器的滚动条样式。
演示
滚动条的组成
::-webkit-scrollbar 滚动条的整个部分
::-webkit-scrollbar-thumb 滚动条上方的方块可以向下和向上连接（或者左右连接css3 滚动条 美化，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track 滚动条的轨迹（带有Thumb）
::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过单击微调框的位置。
::-webkit-scrollbar-track-piece 外轨道，滚动条的中间部分（移除）
::-webkit-scrollbar-corner 角点，即两个滚动条的交点
::-webkit-resizer 通过在两个滚动条的交叉点拖动来调整元素大小的小部件
极简主义者
详细代码这里就不贴了。 具体的样式设置可以通过查看demo上的源码找到。我们看一下demo2中第二个滚动条的样式
/*定义滚动条的高度和宽度以及水平和垂直滚动条的规格对应的背景高度和宽度*/
::-webkit-滚动条
宽度：16px；
高度：16px；
背景颜色：#F5F5F5；
/*定义滚动条内阴影+圆角*/
::-webkit-滚动条-轨道
-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
边框半径：10px；
背景颜色：#F5F5F5；
/* 定义滑块内阴影+圆角 */
::-webkit-滚动条-拇指
边框半径：10px；
-webkit-box-shadow:inset006pxrgba(0,0,0,.3);
背景颜色：#555；
详细设置
定义滚动条就是使用伪元素和伪类，那么哪些是伪元素和伪类呢？
你应该熟悉伪类：link、:focus、:hover，CSS3减少了很多伪类选择器，比如:nth-child、:last-child、:nth-last-of-type()、 ETC。 。
您已经在 CSS 中见过伪元素：:first-line、:first-letter、:before、:after。 这样，在CSS3中，伪元素就调整了，在原来的基础上减少了一个“:”，现在是“::first-letter,::first-line,::before,::after” ，此外，CSS3还减少了一个“::selection”。 两个“::”和一个“:”在CSS3中主要用来区分伪类和伪元素。
webkit的伪类和伪元素的实现非常强大。 可以将滚动条定义为页面元素，然后结合一些中间的CSS3属性，比如渐变、圆角、RGBa等。以后如果有些地方要使用图片，可以将图片转换为Base64，不然每次都要加载那种多张图片，减少请求次数。
可以设置任何对象：边框、阴影、背景图片等，创建的滚动条仍然会根据操作系统本身的设置完成其交互行为。 下面的伪类可以应用于里面的伪元素。 这有点复杂。 怎么写可以看第一个demo，那里有注释。
：水平的
//horizontal伪类适用于任意水平方向的滚动条
：垂直的
//vertical伪类适用于任意垂直方向的滚动条
:减少
//decrement 伪类适用于按键和轨道片段。表示下降的按钮或轨道片段，例如向下或向右连接区域的区域和按钮
：增量
//increment伪类适用于键和轨道片段。表示增量键或轨道片段，例如区域和可以向上或向左连接区域的键
：开始
//start伪类适用于按键和轨道片段。表示对象（按钮轨道片段）是否放置在滑块后面
：结尾
//end伪类适用于按键和轨道片段。表示对象（按钮轨道片段）是否放置在滑块旁边
：双按钮
//double-button 伪类适用于按钮和轨道片段。 确定曲目是否以一对键结束。 也就是说，轨道碎片被一起压入一对钥匙中。
：单按钮
//single-button 伪类适用于按钮和轨道片段。 确定曲目结束的位置是否为关键点。 也就是说，轨道碎片紧邻单个键。
：无按钮
无按钮伪类表示曲目末尾没有按钮。
:角现在
//corner-present伪类表示滚动条的角点是否存在。
: 窗口非活动状态
//适用于所有滚动条css3 滚动条 美化，表示当焦点不在窗口上时，包含滚动条的区域。
::-webkit-scrollbar-track-piece:开始{
/*滚动条上半部分或左半部分*/
::-webkit-scrollbar-thumb:窗口非活动{
/*焦点不在当前区域时滑块的状态*/
::-webkit-scrollbar-button:水平:减量:悬停{
/*当鼠标位于水平滚动条下方的按钮上时*/
