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