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

vue+iview设置滚动条样式1.未修饰滚动条效果如下2.修饰之后3.实现代码::-webkit-scrollbar { width: 6px; background-color: #d8d8d8;}/* 滚动槽 */::-webkit-scrollbar-track { border-radius:10px;}::-webkit-scrollbar-thumb { background-color: #bfc1c4;}4.补充说明::-webkit-scrollbar ：滚动条整体部分，其中的属性: width,height,background,border等。::-webkit-scrollbar-button ：滚动条两端的按钮。可以⽤display:none让其不显⽰，也可以添加背景图⽚，颜⾊改变显⽰效果。::-webkit-scrollbar-track ：外层轨道。可以⽤display:none让其不显⽰，也可以添加背景图⽚，颜⾊改变显⽰效果。::-webkit-scrollbar-track-piece ：内层轨道，具体区别看下⾯gif图，需要注意的就是它会覆盖第三个属性的样式。::-webkit-scrollbar-thumb ：滚动条⾥⾯可以拖动的那部分::-webkit-scrollbar-corner ：边⾓，两个滚动条交汇处::-webkit-resizer ：两个滚动条交汇处⽤于拖动调整元素⼤⼩的⼩控件（基本⽤不上）

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

vue+iview设置滚动条样式1.未修饰滚动条效果如下2.修饰之后3.实现代码::-webkit-scrollbar { width: 6px; background-color: #d8d8d8;}/* 滚动槽 */::-webkit-scrollbar-track { border-radius:10px;}::-webkit-scrollbar-thumb { background-color: #bfc1c4;}4.补充说明::-webkit-scrollbar ：滚动条整体部分，其中的属性: width,height,background,border等。::-webkit-scrollbar-button ：滚动条两端的按钮。可以⽤display:none让其不显⽰，也可以添加背景图⽚，颜⾊改变显⽰效果。::-webkit-scrollbar-track ：外层轨道。可以⽤display:none让其不显⽰，也可以添加背景图⽚，颜⾊改变显⽰效果。::-webkit-scrollbar-track-piece ：内层轨道，具体区别看下⾯gif图，需要注意的就是它会覆盖第三个属性的样式。::-webkit-scrollbar-thumb ：滚动条⾥⾯可以拖动的那部分::-webkit-scrollbar-corner ：边⾓，两个滚动条交汇处::-webkit-resizer ：两个滚动条交汇处⽤于拖动调整元素⼤⼩的⼩控件（基本⽤不上）