CSS自定义Chrome滚动条

2012-10-09 • WEB事儿 • by Nornor Chen

多年前盛行的浏览器滚动条样式定义,只适用于IE系列,对于chrome等webkit内核的高档货是无效的。其实,针对chrome也有它单独的滚动条定义方法,发现一些网站已经用上了,比如说google本身搜索的页面,QQ音乐的网页版等。

CSS自定义滚动条样式

webkit中定义滚动条不再使用css中的属性,而是使用伪类代替,可以定义的伪类这里引用一下
  1. ::-webkit-scrollbar 滚动条整体部分
  2. ::-webkit-scrollbar-button 滚动条两端的按钮
  3. ::-webkit-scrollbar-track 外层轨道
  4. ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
  5. ::-webkit-scrollbar-thumb (滚动条里面可以拖动的那个)
  6. ::-webkit-scrollbar-corner 边角
  7. ::-webkit-resizer 定义右下角拖动块的样式

当然,webkit关于滚动条的伪类还有更多的用法和组合,详细请参考本文后面的参考文章。

最简洁效果-CSS代码

如果你只想定义滚动条为一条竖线,无视那些三角形什么的,最简单粗暴的代码
 ::-webkit-scrollbar-track-piece{background-color:#fff;}
 ::-webkit-scrollbar{width:10px;}
 ::-webkit-scrollbar-thumb{background:#999;} 

一些DEMO

  1. webkit官方滚动条自定义DEMO
  2. QQ音乐

参考文章

  1. CSS自定义滚动条样式
  2. Styling Scrollbars
  3. Creating custom scrollbars with CSS; How CSS isn’t great for every task

题外插播一下

关于自定义滚动条样式,后来又有了用jScrollPane插件实现了浏览器之间的自定义滚动条的兼容。如果需要做多浏览器之间的滚动条定义,不妨可以考虑使用插件。

« pureftpd上传文件失败

5个你可能不知道的HTML5接口 »