本文简单记录一下webkit下美化滚动条的一些方式:
下面这张图比较直观,来源于互联网,不追源了,感谢原作者。
- ::-webkit-scrollbar 滚动条整体部分,一般可以设置宽度
2. ::-webkit-scrollbar-button
两端的按钮
3.
::-webkit-scrollbar-track
外层轨道(track本身就是轨道的意思)
4. ::-webkit-scrollbar-track-piece
内层滚动槽
5.
::-webkit-scrollbar-thumb
滑块
6. ::-webkit-scrollbar-corner
边角
7. ::-webkit-resizer
右下角拖动块的样式(个人觉得这个不应该是这边相关的样式)
- 设置滚动条的宽度:
::-webkit-scrollbar{
width:80px; //为了测试,用了很大的值
}
- 设置滚动的轨道:
::-webkit-scrollbar-track{
background:black; //测试明显,用颜色来标识
border-radius:10px;
}
- 设置滚动的滑块:
::-webkit-scrollbar-thumb{
background:#fff; //测试用
}
扩展阅读: