感谢作者:超毛【前端开发】
因为最近公司做的项目需要用到滚动条(项目在webkit平台下运行),所以研究下滚动条的CSS。
浏览器默认的滚动条样子太过屌丝了,得自己动手整整。记得IE浏览器有几个设置滚条的样式,不过比较鸡肋,只能设置颜色之类的,而且webkit下面也不支持。无意间看到网易邮箱的滚动条样子很好看,一开始以为是用div模拟的,结果一看,吼吼,正合我意,利用的CSS来设置的,而且是webkit浏览器的。
得好好研究这几个属性下,才能自己动手改造。
webkit浏览器css设置滚动条
主要有下面7个属性
- ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的
- ::-webkit-scrollbar-button 滚动条两端的按钮
- ::-webkit-scrollbar-track 外层轨道
- ::-webkit-scrollbar-track-piece 内层滚动槽
- ::-webkit-scrollbar-thumb 滚动的滑块
- ::-webkit-scrollbar-corner 边角
- ::-webkit-resizer 定义右下角拖动块的样式