CSS打造独特风格的滚动条（附Gmail风格和Outlook风格CSS）

完美主义者总是不允许任何不完美的出现，所以设计网页时，就连滚动条也不会放过。一个普普通通的滚动条是根本不能体现完美主义者追求完美的心，所以对滚动条做改动也是必然的。当然咯，我不是完美主义者，但我爱好折腾，所以也进行了滚动条改动。你也想改改滚动条？很好，跟着我一起来吧。

注意：更新CSS后请按下Ctrl+F5强制更新下浏览器缓存。（各位访客也请强制更新下我网站的缓存）

最先看到的特色滚动条是在Gmail，我们来看看具体的区别：

从左至右分别为普通状态、鼠标移动至滚动块上和拖动滚动块时Gmail滚动条和普通滚动条的对比。

这个滚动条并不是用JavaScript写成的，没有用到任何插件，只需要几句简单的CSS3即可。主要用到了-webkit-scrollbar、-webkit-scrollbar-button、-webkit-scrollbar-track、-webkit-scrollbar-thumb这几个伪类。

以下是从Gmail的源代码中提取并稍作修改的控制滚动条的CSS代码，本网站即采用了这段CSS。

::-webkit-scrollbar {
    height:11px;
    width:11px
}
::-webkit-scrollbar-button {
    height:0;
    width:0
}
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {
    display:block
}
::-webkit-scrollbar-button:vertical:start:increment,::-webkit-scrollbar-button:vertical:end:decrement {
    display:none
}
::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal,::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal {
    border-style:solid;
    border-color:transparent
}
::-webkit-scrollbar-track:vertical::-webkit-scrollbar-track:horizontal{
    background-clip:padding-box;
    background-color:#fff;
}
::-webkit-scrollbar-thumb {
    -webkit-box-shadow:inset1px1px0rgba(0,0,0,.1),inset0-1px0rgba(0,0,0,.07);
    background-clip:padding-box;
    background-color:rgba(0,0,0,.2);
    min-height:28px;
    padding-top:100
}
::-webkit-scrollbar-thumb:hover {
    -webkit-box-shadow:inset1px1px1pxrgba(0,0,0,.25);
    background-color:rgba(0,0,0,.4)
}
::-webkit-scrollbar-thumb:active {
    -webkit-box-shadow:inset1px1px3pxrgba(0,0,0,.35);
    background-color:rgba(0,0,0,.5)
}
::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal {
    border-width:0;
}
::-webkit-scrollbar-track:hover {
    -webkit-box-shadow:inset1px00rgba(0,0,0,.1);
    background-color:rgba(0,0,0,.05)
}
::-webkit-scrollbar-track:active {
    -webkit-box-shadow:inset1px00rgba(0,0,0,.14),inset-1px-1px0rgba(0,0,0,.07);
    background-color:rgba(0,0,0,.05)
}

如果希望自己的网站也拥有Gmail风格的滚动条，只需要把上面的代码添加进CSS文件就可以了。

我们再来看看微软最近上线的Outlook网站的CSS，也是小清新风格，微软最近似乎走小清新路线了，Metro开始，一路小清新到现在。微软采用了和Google同样的技术实现了类似效果。值得一提的是，其中使用的-webkit-scrollbar等一系列CSS3伪元素是Webkit内核浏览器才支持的（Chrome等），在Internet Explorer下不会显示此效果。可见微软这次考虑到了市场份额越来越大的Chrome，开始“讨好”Chrome用户了。

通过分析Outlook的源代码，提取出了相关代码，如果希望自己的网站也显示Windows 8风格的滚动条可以在CSS文件中添加如下代码：

::-webkit-scrollbar {
    width:17px;
    height:17px;
    background-color:#f0f0f0;
    border:none
}
::-webkit-scrollbar-thumb {
    background-color:#cdcdcd;
    border:1pxsolid#f0f0f0
}
::-webkit-scrollbar-thumb:hover {
    background-color:#dadada
}
::-webkit-scrollbar-thumb:active {
    background-color:#606060
}
::-webkit-scrollbar-thumb:disabled {
    background-color:#f9f9f9
}
::-webkit-scrollbar-corner {
    background-color:#f0f0f0
}
::-webkit-scrollbar-button {
    background-color:#f0f0f0;
    background-image:url(http://malash.googlecode.com/svn/trunk/win8-scrollbar/win8-scrollbar.png);
    background-repeat:no-repeat
}
::-webkit-scrollbar-button:vertical {
    height:33px
}
::-webkit-scrollbar-button:horizontal {
    width:33px
}
::-webkit-scrollbar-button:horizontal:increment {
    background-position:0-444px
}
::-webkit-scrollbar-button:horizontal:decrement {
    background-position:12px-425px
}
::-webkit-scrollbar-button:vertical:increment {
    background-position:-1px-391px
}
::-webkit-scrollbar-button:vertical:decrement {
    background-position:-1px-358px
}
::-webkit-scrollbar-button:hover {
    background-color:#dadada
}
::-webkit-scrollbar-button:horizontal:increment:hover {
    background-position:0-548px
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
    background-position:12px-529px
}
::-webkit-scrollbar-button:vertical:increment:hover {
    background-position:-1px-495px
}
::-webkit-scrollbar-button:vertical:decrement:hover {
    background-position:-1px-462px
}
::-webkit-scrollbar-button:active {
    background-color:#606060
}
::-webkit-scrollbar-button:horizontal:increment:active {
    background-position:0-652px
}
::-webkit-scrollbar-button:horizontal:decrement:active {
    background-position:12px-633px
}
::-webkit-scrollbar-button:vertical:increment:active {
    background-position:-1px-599px
}
::-webkit-scrollbar-button:vertical:decrement:active {
    background-position:-1px-566px
}
::-webkit-scrollbar-button:disabled {
    background-color:#f9f9f9
}
::-webkit-scrollbar-button:horizontal:increment:disabled {
    background-position:0-756px
}
::-webkit-scrollbar-button:horizontal:decrement:disabled {
    background-position:12px-737px
}
::-webkit-scrollbar-button:vertical:increment:disabled {
    background-position:-1px-703px
}
::-webkit-scrollbar-button:vertical:decrement:disabled {
    background-position:-1px-670px
}

是不是so easy？赶紧行动吧！

文章来自：CSS打造独特风格的滚动条（附Gmail风格和Outlook风格CSS）