自定义网页内的滚动条

CSS的作用就是改变内容呈现的样式，于是，几乎每个站点的网页上链接的颜色、图片的边框、文字的阴影等等都有各自独特的赋值。但是滚动条确是很少有人动的一个部位。

但是当然也有人动过了，比如 fireyy 和 wayne 。

因为他们都是水果控，所以实现方法当然是用 Safari 的私有 CSS 属性（同内核的 Chrome 浏览器当然也支持），我也照做了，本文就是个演示，如果使用 Safari 或者 Chrome 浏览器，应该可以看到窗口右侧那个苗条的滚动条了，如果使用别的浏览器……好吧，这里有张效果图片：

具体大体方法如下：

一、先给滚动条腾出个地方来；

body   {
position: absolute;/*1*/
top: 0;
left: 0;
bottom: 0;
right: 10px;/*2*/
overflow-y: scroll;
overflow-x: hidden;/*3*/
}

1. 只有设置成absolute滚动条才能正常显示；
2. 留出一点点的距离，以便滚动条不至于紧贴浏览器右侧边界显示。
3. 根据需求，也可改成 auto ，对应地，上面的 bottom 值也设置 10px;

二、干掉浏览器默认滚动条；

html {
overflow-y: auto;
background-color: transparent;
}

auto 或者 hidden 都可以；

三、定义新的滚动条；

::-webkit-scrollbar {
width: 10px;
height: 10px;
}

width 和 height 分别定义竖向滚动条的宽度和横向滚动条的高度。

四、到上一步为止还看不到新的滚动条，下面开始让滚动条现身：

::-webkit-scrollbar-track-piece {/*1*/
background-color:#f6f6f6;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {/*2*/
background-color: #6b7f93;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal {/*3*/
background-color: #6b7f93;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {/*4*/
height: 30px;
display: block;
background-color: transparent;
}

1. 定义滚动条「轨道」的样式；
2. 竖向滚动条样式；
3. 横向滚动条样式；
4. 滚动条两端的按钮区域；可以参考原始的浏览器滚动条，是不是两端会有按钮辅助滚动操作？那个按钮区域的样式就在这里定制。

相应的位置在定义样式的时候可以使用常用的那些属性，比如背景色、边框等等，甚至可以使用背景图片来制作更别致的滚动条部件。

这样虽然可以制作出和页面风格相匹配的滚动条，但是也有问题存在。

• 因为在使用了自定义滚动条后 body 的 position 属性变成了 absolute ，那些常见的实现页面内平滑滚动的JS会失效。
• 只在 webkit 内核的浏览器里有效。
• 缩小浏览器窗口的宽度，右侧滚动条盖住页面内容的样子多少有点小别扭。

大体方法就是这样了，更详细的属性说明，请参照 webkit.org 给出的说明文章。