css修改滚动条样式

辰漪
2021-12-23 / 0 评论 / 41 阅读 / 正在检测是否收录...

滚动条相关样式

::-webkit-scrollbar // 滚动条整体部分
::-webkit-scrollbar-thumb  // 滚动条轨道里面的小方块,能向上向下移动
::-webkit-scrollbar-track  // 滚动条的轨道
::-webkit-scrollbar-button // 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece // 内层轨道,滚动条中间部分(除去)
::-webkit-scrollbar-corner // 边角,即两个滚动条的交汇处
::-webkit-resizer // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

如果想要改变滑块的宽度

我是通过给滑块加border透明实现改变滑块的宽度

// 滑块
&::-webkit-scrollbar-thumb {
   border: 3px solid transparent; // 加边框  透明
   border-radius: 6px;
   height: 88px;
   background: #00d2fb;
   background-clip: content-Box; // 裁剪
}
0
选择打赏方式:
微信

评论 (0)

取消