CSS本人设置判定滚动条款式

相信很多人都遇到过在设想中自定义滚动条款式地情形，之前我都是勤劳说服设想师承受阅读器自带地滚动条款式，但是这样只能躲避或者同一时刻是解决不了疑问，最近在项目中遇到了，正好来总结一下。当然，兼容一切阅读器地滚动条款式目前是不存在地。

IE下地滚动条款式

IE是最早供给滚动条地款式认可赞同，嗯，好多年了，但是其它阅读器不断没有认可赞同，IE独孤求败了。

这些款式规则非常的容易：

scrollbar-arrow-color: color; /*三角箭头地色彩*/ scrollbar-face-color: color; /*立体滚动条地色彩（包含箭头部分地背风光）*/ scrollbar-3dlight-color: color; /*立体滚动条亮边地色彩*/ scrollbar-highlight-color: color; /*滚动条地高亮色彩（左暗影？）*/ scrollbar-shadow-color: color; /*立体滚动条暗影地色彩*/ scrollbar-darkshadow-color: color; /*立体滚动条外暗影地色彩*/ scrollbar-track-color: color; /*立体滚动条背景色彩*/ scrollbar-base-color:color; /*滚动条地基色*/

估计就这些，你也可以定义cursor来定义滚动条地鼠标手势。

这里，很久以前danger做了个基于Flash地可视化工具，简单但是好用：

选中CSS选项即可自动生成CSS款式，这里不再过多地引见了。嗯，多谢大猫教师介绍和说明。

webkit地自定义滚动条款式

yes，这里才是今天要重点引见地。

从上一部分地款式名中就可以看到，IE只能定义相关部分地color等属性，这样太不灵活了。

webkit最近完成了对滚动条地认可赞同，先看一个简单地demo：

遗憾地是，，webkit不再是用简单地几个CSS属性，而是一坨地CSS伪元素：

::-webkit-scrollbar 滚动条全体部分 ::-webkit-scrollbar-button 滚动条两端地按钮 ::-webkit-scrollbar-track 外层轨道 ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去） ::-webkit-scrollbar-thumb （拖动条？滑块？滚动条里面可以拖动地那个，肿么翻译好呢？） ::-webkit-scrollbar-corner 边角 ::-webkit-resizer 定义右下角拖动块地款式

经过这些伪元素，可以完好地重写一个网站地滚动条款式。

当然webkit供给地不止这些，还有很多伪类，可以更丰厚滚动条款式：

:horizontal – horizontal伪类应用于高度方向地滚动条 :vertical – vertical伪类应用于竖直方向地滚动条 :decrement – decrement伪类应用于按钮和内层轨道(track piece)。它用来指示按钮或许内层轨道可不可以会减小视窗地地位(比方，垂直滚动条地上面，高度滚动条地左边。) :increment – increment伪类和decrement类似，用来指示按钮或内层轨道可不可以会增大视窗地地位(比方，垂直滚动条地下面和高度滚动条地右边。) :start – start伪类也应用于按钮和滑块。它用来定义对象可不可以放到滑块地后面。 :end – 类似于start伪类，标识对象可不可以放到滑块地后面。 :double-button – 该伪类以用于按钮和内层轨道。用于判别一个按钮是不是放在滚动条同一端地一对按钮中地一个。有关内层轨道来说，它表示内层轨道可不可以紧靠一对按钮。 :single-button – 类似于double-button伪类。对按钮来说，它用于判别一个按钮可不可以本人独立地在滚动条地一段。对内层轨道来说，它表示内层轨道可不可以紧靠一个single-button。 :no-button – 用于内层轨道，表示内层轨道可不可以要滚动到滚动条地终端，比方，滚动条两端没有按钮地时候。 :corner-present – 用于一切滚动条轨道，指示滚动条圆角可不可以显示。 :window-inactive – 用于一切地滚动条轨道，指示应用滚动条地某个页面容器(元素)可不可以当前被激活。(在webkit最近地版本中，该伪类也可以用于::selection伪元素。webkit团队无方案扩展它并促进成为一个标准地伪类)

另外，:enabled、:disabled、:hover 和 :active 等伪类完全相同可以用于滚动条中。

有关细致地demo，这里不再做了，网上已经有很多demo可以参考，比方，webkit官方地这个，细致地线上项目中也有现成地例子，比方，QQ空间地签到弹出框和豆瓣说地右侧概况栏(某条消息评论多地时候会显示)。

值得一提地是，webkit地这个伪类和伪元素地完成很强大，固然类目有些多，但是我们可以把滚动条当成一个页面元从来定义，也差不多可以用上一些高级地CSS3属性，比方渐变、圆角、RGBa等等，当然有些地方也可以用图片，然后图片也可以转换成Base64，总之，可以尽情发扬了。

PS:中间部分术语翻译不到位，欢送指正。

参考文章：

Styling Scrollbars Creating custom scrollbars with CSS; How CSS isn’t great for every task

原文：http://www.qianduan.net/css-custom-scroll-bar-style.html