滚动条样式

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

转自：https://www.cnblogs.com/tdxl/p/11387836.html

/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 5px; /*对垂直流动条有效*/
  height: 5px; /*对水平流动条有效*/
}
/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.2);
}

/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
  display: none;
}

 

 

修改局部滚动条样式：

　　css：（box是需要修改的div的class）

  .box::-webkit-scrollbar {
    width: 5px;
  }
  .box::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #C1C1C1;
  }

　　less/scss：

.ant-layout-sider {
  height: 100%;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 5px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #C1C1C1;
  }
}