前两天逛别人的网站，突然发现人家的网站还可以自定义浏览器的滚动条的，作为一名前端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 的那个限制太多，没兴趣。又收获了一点点~ ^_^