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:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(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:inset 1px 1px 1px rgba(0,0,0,.25);
    background-color:rgba(0,0,0,.4)
}
::-webkit-scrollbar-thumb:active {
    -webkit-box-shadow:inset 1px 1px 3px rgba(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:inset 1px 0 0 rgba(0,0,0,.1);
    background-color:rgba(0,0,0,.05)
}
::-webkit-scrollbar-track:active {
    -webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px -1px 0 rgba(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:1px solid #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?赶紧行动吧!

4 thoughts on “CSS打造独特风格的滚动条(附Gmail风格和Outlook风格CSS)

    1. 不一样,你浏览器里的缓存可能没更新,你按Ctrl+F5强制更新下我的网站的缓存就能看到不同了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注