相信很多人都遇到过在设计中自定义滚动条样式的情景，之前我都是努力说服设计师接受浏览器自带的滚动条样式，但是这样只能规避还是解决不了问题，最近在项目中遇到了，正好来总结一下。当然，兼容所有浏览器的滚动条样式目前是不存在的。
IE是最早提供滚动条的样式支持，嗯，好多年了，但是其它浏览器一直没有支持，IE独孤求败了。
这些样式规则很简单：
大概就这些，你也可以定义cursor来定义滚动条的鼠标手势。
这里，很久以前danger做了个基于Flash的可视化工具，简单但是好用：
大猫老湿推荐。
yes，这里才是今天要重点介绍的。
从上一部分的样式名中就可以看到，IE只能定义相关部分的color等属性，这样太不灵活了。
webkit最近实现了对滚动条的支持，先看一个简单的demo：
webkit官方的这个，具体的线上项目中也有现成的例子，比如，QQ空间的签到弹出框和豆瓣说的右侧详情栏(某条信息评论多的时候会显示)。
值得一提的是，webkit的这个伪类和伪元素的实现很强大，虽然类目有些多，但是我们可以把滚动条当成一个页面元素来定义，也差不多可以用上一些高级的CSS3属性，比如渐变、圆角、RGBa等等，当然有些地方也可以用图片，然后图片也可以转换成Base64，总之，可以尽情发挥了。
PS:中间部分术语翻译不到位，欢迎斧正。