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）