欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

滚动条如何自定义样式

程序员文章站 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是用来设置水平方向的滚动条宽度