CSS3实现Gmail风格滚动条

经常使用Chrome浏览器浏览Gmail的朋友应该会发现,Gmail在显示比较长的内容时的时(比如常常的邮件列表或者联系人列表),右侧会出现一个灰色调的滚动条,风格与系统自带的完全不同。

Gmail滚动条和普通滚动条的对比


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

以下是我从Gmail的源代码中提取并稍作修改的控制滚动条的CSS代码:

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

本站已亲测,如无请按F5强制刷新…

《CSS3实现Gmail风格滚动条》有17个想法

发表评论

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