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 :两个滚动条交汇处用于拖动调整元素大小的小控件(基本用不上)


Logo

前往低代码交流专区

更多推荐