晓风博客

一片荒芜的地方

利用CSS美化你的滚动条

前两天逛别人的网站,突然发现人家的网站还可以自定义浏览器的滚动条的,作为一名前端er,必须得兴奋一下么。遂F12了一下,把样式“拿来”了!

这个滚动条实际上也就是几行代码,不过能给人以愉悦的感觉。先看看我的成品吧:

我博客,或者文理微博墙。

我博客:http://liyaodong.sinaapp.com

文理微博墙:http://wlwbq.sinaapp.com

具体代码(以文理微博墙的滚动条为例)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
/* 定义滚动条宽度 */
::-webkit-scrollbar {
    width: 12px;
}

/* 定义那个轨道的样式 */
::-webkit-scrollbar-track {
    background:#222;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

/* 定义滚动按钮的样式,就是那个bar */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#43bbe7), to(#2188d5));
}
看前缀应该就知道,这个是浏览器的自定义样式。而不是普通的样式。浏览器的样式是用::两个冒号来开头的,很奇怪吧。以前没见过。然后看代码,track就是轨道,thumb就是滚动按钮,-weibkit-gradient是渐变,linear是线性渐变。下面给出这个伪元素的相关属性吧:
::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollbar-track 外层轨道 ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去) ::-webkit-scrollbar-thumb (拖动条?滑块?滚动条里面可以拖动的那个,肿么翻译好呢?) ::-webkit-scrollbar-corner 边角 ::-webkit-resizer 定义右下角拖动块的样式

恩,就这么多了。很遗憾的是,这个只支持webkit的浏览器。IE不支持这玩意,但是IE也有自己的自定义,可以自己百度之。个人认为IE 的那个限制太多,没兴趣。又收获了一点点~ ^_^