css 重写滚动条样式

 最近table中有列的td必须上滚动条，但是默认的样式实在是太丑了，但是好久没用了忘记了，查了下，顺便记录一下

默认的滚动条样式是这样的，有时候和项目的样式风格不符合，只能重写一下样式。

如果是横向滚动条，就重写height 纵向就重写width，演示图中我重写就是height。

然后分别重写了滚动条的滑块背景颜色 然后重写了外层轨道的背景颜色

.your-div-class::-webkit-scrollbar {
  height: 4px;    
  //width: 4px;
}

.your-div-class::-webkit-scrollbar-thumb {
  background: rgb(65 53 243 / 45%);
  border-radius: 25px;
}

.your-div-class::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1);
  border-radius: 25px;
}

这是修改之后的样式

下面列出了所有可以修改的属性

 ::-webkit-scrollbar 滚动条整体部分，设置宽度
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track  外层轨道
::-webkit-scrollbar-track-piece  内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式