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让其不显⽰，也可以添加背景图
win10滚动条设置
⽚，颜⾊改变显⽰效果。::-webkit-scrollbar-track ：外层轨道。可以⽤display:none让其不显⽰，也可以添加背景图⽚，颜⾊改变显⽰效果。
::-webkit-scrollbar-track-piece ：内层轨道，具体区别看下⾯gif图，需要注意的就是它会覆盖第三个属性的样式。
::-webkit-scrollbar-thumb ：滚动条⾥⾯可以拖动的那部分
::-webkit-scrollbar-corner ：边⾓，两个滚动条交汇处
::-webkit-resizer ：两个滚动条交汇处⽤于拖动调整元素⼤⼩的⼩控件（基本⽤不上）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。