标签归档:webkit

基于webkit的浏览器的滚动条

 

感谢作者:超毛【前端开发

 

因为最近公司做的项目需要用到滚动条(项目在webkit平台下运行),所以研究下滚动条的CSS。

浏览器默认的滚动条样子太过屌丝了,得自己动手整整。记得IE浏览器有几个设置滚条的样式,不过比较鸡肋,只能设置颜色之类的,而且webkit下面也不支持。无意间看到网易邮箱的滚动条样子很好看,一开始以为是用div模拟的,结果一看,吼吼,正合我意,利用的CSS来设置的,而且是webkit浏览器的。

11111

得好好研究这几个属性下,才能自己动手改造。

webkit浏览器css设置滚动条

主要有下面7个属性

  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 定义右下角拖动块的样式

继续阅读