css重写滚动条样式

2023年6月20日发(作者：)

css重写滚动条样式 最近table中有列的td必须上滚动条，但是默认的样式实在是太丑了，但是好久没⽤了忘记了，查了下，顺便记录⼀下默认的滚动条样式是这样的，有时候和项⽬的样式风格不符合，只能重写⼀下样式。如果是横向滚动条，就重写height 纵向就重写width，演⽰图中我重写就是height。然后分别重写了滚动条的滑块背景颜⾊ 然后重写了外层轨道的背景颜⾊-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 定义右下⾓拖动块的样式

2023年6月20日发(作者：)

css重写滚动条样式 最近table中有列的td必须上滚动条，但是默认的样式实在是太丑了，但是好久没⽤了忘记了，查了下，顺便记录⼀下默认的滚动条样式是这样的，有时候和项⽬的样式风格不符合，只能重写⼀下样式。如果是横向滚动条，就重写height 纵向就重写width，演⽰图中我重写就是height。然后分别重写了滚动条的滑块背景颜⾊ 然后重写了外层轨道的背景颜⾊-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 定义右下⾓拖动块的样式