Day: June 4, 2015

用CSS美化你的滚动条

本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条。改变它们的颜色,调整它们的外形,适配你对页面UI设计。我们首先将会看看谷歌(Webkit)浏览器提供了哪些CSS属性,最后,还将介绍如何用jQuery支持其它类型的浏览器。 各种浏览器对CSS滚动条的支持情况 这里说的Webkit浏览器包括谷歌浏览器,苹果公司的Safari浏览器,以及最新的Opera浏览器。这些浏览器加起来占有超过半数的桌面浏览 器市场份额。对于移动端浏览器,基本上是谷歌浏览器和Safari浏览器的天下。唯一的遗憾是火狐浏览器,至今没有对CSS滚动条属性做任何的改进。至于 IE浏览器,我们期待吧。 鉴于目前浏览器市场的格局,我们很有信心相信CSS滚动条美化功能会有很好的很光明的前景。 观看演示 滚动条会出现在哪些地方 在真正开始对CSS滚动条的讲解之前,先让我们做一个简单的演示页面;一个含有滚动条的页面。滚动条通常会出现在这些地方: 浏览器边框,当页面内容超过浏览器视窗大小 textarea,内容过多时 iframe div或任何block元素,当它们的被设定成overflow属性时。 对于我们的演示页面,使用的HTML代码是下面这些: <div class="container"> <p>Lorem ipsum… Read More