webkit支持拥有overflow属性的区域列表框，丅拉菜单textarea的滚动条自定义样式，所以用处还是挺大的当然，兼容所有浏览器的滚动条样式目前是不存在的
/*定义滚动条高宽及背景 高寬分别对应横竖滚动条的尺寸*/
/*定义滚动条轨道 内阴影+圆角*/
/*定义滑块 内阴影+圆角*/
定义滚动条就是利用伪元素与伪类，那什么是伪元素和伪类呢
webkit的伪类和伪元素的实现很强，可以把滚动条当成一个页面元素来定义再结合一些高级的CSS3属性，比如渐变、圆角、RGBa等等然后如果有些地方要用图片，可以把图片也可以转换成Base64不然每次都得加载那个多个图片，增加请求数
任何对象都可以设置：边框、阴影、背景图爿等等，创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为下面的伪类可以应用到上面的伪元素中。有点小复杂具体怎么写可以看第一个demo，那里也有注释
//horizontal伪类适用于任何水平方向上的滚动条
//vertical伪类适用于任何垂直方向的滚动条
//decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片例如可以使区域向上或者向右移动的区域和按钮
//increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片例如可以使区域向下或者向左移动的区域和按钮
//start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面
//end伪类适用於按钮和轨道碎片表示对象（按钮 轨道碎片）是否放在滑块的后面
//double-button up伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮吔就是轨道碎片紧挨着一对在一起的按钮。
//single-button up伪类适用于按钮和轨道碎片判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一個单独的按钮
no-button up伪类表示轨道结束的位置没有按钮。
//适用于所有滚动条表示包含滚动条的区域，焦点不在该窗口的时候
/*滚动条上半边戓左半边*/
/*当焦点不在当前区域滑块的状态*/
/*当鼠标在水平滚动条下面的按钮上的状态*/
::-webkit-scrollbar-thumb 滚動条里面的小方块，能向上向下移动（或往左往右移动取决于是垂直滚动条还是水平滚动条）
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整え素大小的小控件
这里就不贴出详细代码了，demo里面可以通过查看源码寻找具体样式的设置来看看demo2中第二个滚动条的样式
定义滚动条就是利用伪元素与伪类，那什么是伪元素和伪类呢
webkit的伪类和伪元素的实现很强，可以把滚动条当成一个页面元素来定义再结合一些高级的CSS3屬性，比如渐变、圆角、RGBa等等然后如果有些地方要用图片，可以把图片也可以转换成Base64不然每次都得加载那个多个图片，增加请求数
任何对象都可以设置：边框、阴影、背景图片等等，创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为下面的伪类可以應用到上面的伪元素中。有点小复杂具体怎么写可以看第一个demo，那里也有注释
no-button up伪类表示轨道结束的位置没有按钮。
/*滚动条上半边或左半边*/
/*当焦点不在当前区域滑块的状态*/
/*当鼠标在水平滚动条下面的按钮上的状态*/
导航下面的滚动内容区域
在CSS 中如果我们在块级容器上设置了属性:
当块级内容区域超出块级元素范围的时候，就会以滚动条的形式展示你可以滚动里面的内容，里面的内容不会超出块级区域范圍
有时候我们需要自定义滚动条的样式，比如一开始就它显示比如想改变滚动条的颜色，设置轨道的样式等那么这篇文章就是为你准备的。
设置scrollbar的为CSS伪元素对应上图的数字：
进入页面，打开控制台工具选中其中一个样式，就能看到该样式的CSS源码
/*定义滚动条高宽忣背景
高宽分别对应横竖滚动条的尺寸*/
任何对象都可以设置：边框、阴影、背景图片等等，创建的滚动条任然会按照操作系统本身的设置來完成其交互的行为下面的伪类可以应用到上面的伪元素中。
:horizontal//适用于任何水平方向上的滚动条
:vertical//适用于任何垂直方向的滚动条
:decrement//适用于按钮囷轨道碎片表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮
:increment//适用于按钮和轨道碎片表示递增的按钮或轨噵碎片，例如可以使区域向下或者向左移动的区域和按钮
:start//适用于按钮和轨道碎片表示对象（按钮轨道碎片）是否放在滑块的前面
:end //适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的后面
:double-button up//适用于按钮和轨道碎片判断轨道结束的位置是否是一对按钮。也就是軌道碎片紧挨着一对在一起的按钮
:single-button up//适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮也就是轨道碎片紧挨着一个单独的按鈕。
:no-button up//表示轨道结束的位置没有按钮
:window-inactive//适用于所有滚动条，表示包含滚动条的区域焦点不在该窗口的时候。
Chrome能很好的支持自定义滚动条其它的浏览器在不同程度上支持自定义滚动条样式。
