CSS如何自定义滚动条样式
网络整理 - 07-27
css实现滚动条样式有时候非常有用,客户既然提出来了我们就应该满足。这里我们就来总结一下。当然,兼容所有浏览器的滚动条样式目前是不存在的。
IE下的滚动条样式
IE是最早提供滚动条的样式支持,嗯,好多年了,但是其它浏览器一直没有支持,IE独孤求败了。
这些样式规则很简单:
大概就这些,你也可以定义cursor来定义滚动条的鼠标手势。
这里,很久以前danger做了个基于Flash的可视化工具,简单但是好用:
选中CSS选项即可自动生成CSS样式,这里不再过多的介绍了。嗯,多谢大猫老师推荐。
webkit的自定义滚动条样式
yes,这里才是今天要重点介绍的。
从上一部分的样式名中就可以看到,IE只能定义相关部分的color等属性,这样太不灵活了。
webkit最近实现了对滚动条的支持,先看一个简单的demo:
不过,webkit不再是用简单的几个CSS属性,而是一坨的CSS伪元素:
通过这些伪元素,可以完全的重写一个网站的滚动条样式。
当然webkit提供的不止这些,还有很多伪类,可以更丰富滚动条样式:
另外,:enabled、:disabled、:hover 和 :active 等伪类同样可以用于滚动条中。
关于具体的demo,这里不再做了,网上已经有很多demo可以参考,比如,QQ空间的签到弹出框和豆瓣说的右侧详情栏(某条信息评论多的时候会显示)。
值得一提的是,webkit的这个伪类和伪元素的实现很强大,虽然类目有些多,但是我们可以把滚动条当成一个页面元素来定义,也差不多可以用上一些高级的CSS3属性,比如渐变、圆角、RGBa等等,当然有些地方也可以用图片,然后图片也可以转换成Base64,总之,可以尽情发挥了。