用CSS美化你的滚动条
来源:互联网 发布:青少年正确使用网络 编辑:程序博客网 时间:2024/06/01 08:32
本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条。改变它们的颜色,调整它们的外形,适配你对页面UI设计。我们首先将会看看谷歌(Webkit)浏览器提供了哪些CSS属性,最后,还将介绍如何用jQuery支持其它类型的浏览器。
各种浏览器对CSS滚动条的支持情况
这里说的Webkit浏览器包括谷歌浏览器,苹果公司的Safari浏览器,以及最新的Opera浏览器。这些浏览器加起来占有超过半数的桌面浏览器市场份额。对于移动端浏览器,基本上是谷歌浏览器和Safari浏览器的天下。唯一的遗憾是火狐浏览器,至今没有对CSS滚动条属性做任何的改进。至于IE浏览器,我们期待吧。
鉴于目前浏览器市场的格局,我们很有信心相信CSS滚动条美化功能会有很好的很光明的前景。
观看演示
滚动条会出现在哪些地方
在真正开始对CSS滚动条的讲解之前,先让我们做一个简单的演示页面;一个含有滚动条的页面。滚动条通常会出现在这些地方:
- 浏览器边框,当页面内容超过浏览器视窗大小
- textarea,内容过多时
- iframe
- div或任何block元素,当它们的被设定成overflow属性时。
对于我们的演示页面,使用的HTML代码是下面这些:
其实只有一个div元素,但因为有太多的内容而出现滚动条。我们给它最初的CSS样式是固定高度和宽度,使它出现横向和纵向滚动条,CSS代码是这样的:
它的原始显示效果大概是这个样子:
用CSS美化滚动条
很多年前谷歌浏览器就已经开始支持对滚动条的CSS美化。这些Webkit浏览器专属的CSS属性需要使用-webkit-浏览器引擎前缀,我们在这里将只会使用一些基本的CSS滚动条属性,在代码里会增加一些必要的解释说明。
当CSS中出现伪元素样式时,Webkit引擎将会关闭它的缺省滚动条样式输出,只使用CSS里提供的样式信息。 – Surfin’ Safari
这里是其它一些伪元素样式:
如果你对这里为什么会使用双引号标注伪元素,请看《理解:Before和:After伪元素》里的讲解。
加上了这些CSS属性,你将会看到下面的效果(再次提醒:你需要使用Webkit浏览器,比如谷歌浏览器才能看到效果)。
IE浏览器有自己的滚动条CSS属性!
你可能会感到意外,IE浏览器是最早的一个支持滚动条外观CSS自定义的浏览器。早在IE5.5版时就支持,但仅支持颜色的改变。
这些属性今天仍然是延用的;看看这IE9里的演示效果:
将会是下面这个样子:
兼容支持非Webkit浏览器
谷歌浏览器的用户是最幸福的。但我们也不能放弃火狐浏览器和IE浏览器用户。对于这些浏览器,有一个非常有效的补救方案,就是使用javascript插件。网上有不少人推荐一个由Kelvin Luck开发的一个jQuery插件:jScrollPane。但也有人评论这个插件是“PITA”,我翻了一下字典,发现“PITA”中文意思是“让人蛋疼”。经过试用,感到它的确是让人蛋疼。不推荐使用它。我发现了另外一个插件malihu-custom-scrollbar-plugin,感觉相当不错,它的用法是:
火狐浏览器中的效果截图:
观看演示
总结
已经有很多网站都使用了这些滚动条的CSS美化技巧,特别是谷歌的一些应用和网站上,比如Gmail和Google+。相信很快火狐浏览器和IE浏览器也会提供自己的解决方案。如果你在使用滚动条的CSS美化上有非常漂亮的例子,请留在评论里供大家欣赏,谢谢。
0 0
- 用CSS美化你的滚动条
- 用CSS美化你的滚动条
- 用CSS美化你的滚动条
- 用CSS美化你的滚动条
- 用CSS美化你的滚动条
- 用CSS美化你的滚动条
- 用CSS美化你的滚动条
- 用css美化滚动条
- 用css美化滚动条
- 用 css 美化滚动条
- 用CSS美化滚动条
- 使用CSS美化Chrome下的滚动条样式
- css实现美化浏览器滚动条
- 用CSS美化你的网页
- 用CSS美化你的网页
- 用CSS美化你的网页
- CSS的滚动条
- FLex组件之滚动条(ScrollBar)CSS美化
- socket网络编程
- lucene 搜索search
- 流编辑器sed
- 利用新浪SAE云计算平台搭建免费的WordPress独立博客
- Android系统自带样式(android:theme)简介 .
- 用CSS美化你的滚动条
- awk使用
- 求解逆波兰表达式(前缀表达式)
- matlab 生成不相交的若干个圆
- C语言标准库函数--数学函数、字符(串)处理函数
- [BZOJ1007]HNOI2008水平可见直线|计算几何|栈
- awk编程
- iOS真机调试
- 关于 xxxx.exe 中的 0xxxxxxxx 处最可能的异常: 0xC0000005: 读取位置 0xxxxxxxx 时发生访问冲突