滚动条如何自定义样式
程序员文章站
2022-07-03 20:52:54
...
浏览器默认的滚动条可能会不满足pm的需求,所以我们可以自定义浏览器的滚动条样式。
- Thumb: 滚动条本身,
- Track: 滚动条下面的轨道
- Buttons: 滚动条轨道的两端。
- Corner: 两个滚动条的交点
- Resizer: 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件。
所以在代码中,可以先对滚动条整体做样式限定,后再对里面具体的元素进行样式限定。如下:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 4px;
height: 4px;
}
::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: rgba(0,0,0,.2);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
在::-webkit-scrollbar 中,width是用来设置垂直方向的滚动条宽度,height是用来设置水平方向的滚动条宽度
上一篇: css 自定义浏览器滚动条样式
下一篇: web 打印分页技巧