CSS自定义滚动条样式

早在IE5.5时代IE浏览器就可以自定义滚动条样式了,但是也只是自定义颜色而已。时至今日,在标准浏览器时代,自定义滚动条样式又回来了。只不过目前还是WebKit的一个私有属性(e.g. ::-webkit-scrollbar),没有一个CSS标准,也没有得到浏览器的统一。不过相对于IE浏览器已经很不错了,支持定义滚动条的宽度,背景颜色,背景渐变,背景图片,圆角,阴影等。其实该属性早在几年前(2009)就提出了,只是还不为人熟知。
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; /*滚动条的基色*/

CSS自定义滚动条样式
由于这并不是一个CSS标准,目前只有WebKit核心的浏览器支持,所以需要加-webkit-前缀。
webkit自定义滚动条样式不再是用简单的几个CSS属性,而是一些CSS伪元素:

::-webkit-scrollbar /*滚动条 1*/
::-webkit-scrollbar-button /*滚动条按钮 2*/
::-webkit-scrollbar-track /*滚动条外层轨道 3*/
::-webkit-scrollbar-track-piece /*滚动条内层轨道 3*/
::-webkit-scrollbar-thumb /*滚动条滑块 4*/
::-webkit-scrollbar-corner /*滚动条边角 5*/
::-webkit-resizer /*滚动条缩放 6*/

通过下图对比具体认识一下这些部位。

通过这些伪元素,可以完全的重写一个网站的滚动条样式。
当然webkit提供的不止这些,还有很多伪类,可以更丰富滚动条样式:

:horizontal – 应用于水平方向的滚动条
:vertical – 应用于竖直方向的滚动条
:decrement – 应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如,垂直滚动条的上面,水平滚动条的左边。)
:increment – 和decrement类似,用来指示按钮或内层轨道是否会增大视窗的位置(比如,垂直滚动条的下面和水平滚动条的右边。)
:start – 应用于按钮和滑块。它用来定义对象是否放到滑块的前面。
:end – 类似于start伪类,标识对象是否放到滑块的后面。
:double-button – 该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说,它表示内层轨道是否紧靠一对按钮。
:single-button – 类似于double-button伪类。对按钮来说,它用于判断一个按钮是否自己独立的在滚动条的一端。对内层轨道来说,它表示内层轨道是否紧靠一个single-button。
:no-button – 用于内层轨道,表示内层轨道是否要滚动到滚动条的终端,比如,滚动条两端没有按钮的时候。
:corner-present – 用于所有滚动条块,指示滚动条圆角是否显示。
:window-inactive – 用于所有的滚动条块,指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中,该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)
另外,:enabled、:disabled、:hover 和 :active 等伪类同样可以用于滚动条中。

演示

“CSS自定义滚动条样式”的4个回复

    1. ?号后面跟的是实际文件地址,php file_get_contents动态调用的。

  1. 国内最大邮件代发绿色通道,最佳的邮件群发效果,拥有最专业的邮件营销方案策略,以及企业专用邮件服务器系统,尽在绿邮网(www.greenedm.com)

发表评论

电子邮件地址不会被公开。 必填项已用*标注