css修改滚动条样式

滚动条相关样式

::-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; // 裁剪
}