webkit自定义滚动条

Sword Wang -

在之前的 Google Reader的颓然改变 里我吐槽了google reader的这次改版实在是糟糕透了，但是现在看来，自己似乎也渐渐习惯了——这得益于Google的不断的改进，扭转很多不如意的方面。比如内容区添加了清晰的边线，工具条的高度被压缩，甚至如果窗口高度不高的情况下，搜索栏和工具栏的空间会被压缩的更多。当然，直到现在我还是没法接受那种泛白的背景，长时间阅读还是很累人的。

但其实改版里还是有很多令人眼前一亮的地方，就比如webkit优化的滚动条，更为美观也更加节省空间。

于是我也整了整自己网站的滚动条，基本上就是自己写的简化版的Google滚动条，代码更少更简单，直接加到CSS文件里就搞定了。

::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-button{}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment{width:0;height:0;}
::-webkit-scrollbar-track-piece{background-clip:padding-box;background-color:whitesmoke;border:solid white;}
::-webkit-scrollbar-track-piece:vertical{box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.05);border-width:0;}
::-webkit-scrollbar-track-piece:horizontal{box-shadow:inset 0 1px 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.05);border-width:0;}
::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2);background-clip:padding-box;border:solid transparent;}
::-webkit-scrollbar-thumb:vertical{border-width:1px 1px 1px 2px;min-height:24px;box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1);}
::-webkit-scrollbar-thumb:horizontal{border-width:2px 1px 1px 1px;min-width:24px;box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1);}
::-webkit-scrollbar-thumb:vertical:hover{background-color:rgba(0,0,0,.6);box-shadow:inset 1px 1px 0 rgba(0,0,0,.5),inset 0 -1px 0 rgba(0,0,0,.3);}
::-webkit-scrollbar-thumb:horizontal:hover{background-color:rgba(0,0,0,.6);box-shadow:inset 1px 1px 0 rgba(0,0,0,.5),inset -1px 0 0 rgba(0,0,0,.3);}

其水平滚动效果在之前我刚写完的 修复WordPress的Pingback 里第一次显现，水平的改善效果明显优于垂直。

刚好前段时间闹的沸沸扬扬的webkit威胁论，把webkit前缀推向了恶的一方，但其实webkit本身没什么过错，只是它的崛起从某种程度上来说意味着它可能重演IE的过去。我的博客的访问量50%来自Chrome，所以做这样的改变其实不足为奇。但倘若IE和FF甚至是OPERA都去实现-webkit前缀，那么有与无还有什么区别呢？