滚动条样式

自定义滚动条样式

::-webkit-scrollbar

用来设置整个滚动条宽高背景色等，决定滚动条所占位置
developer.mozilla.org/zh-CN/docs/…

::-webkit-scrollbar-thumb

用来设置滚动条拖动滑块样式，如颜色等
注意：这里滑块的宽是由::-webkit-scrollbar中的width决定，无论你设置width多少都无用

::-webkit-scrollbar-track

用来设置滑动轨道样式，通常不需要，只需要前两个就可

例子

.hello::-webkit-scrollbar {
  width: 20px;
  height: 4px;
  border-radius: 4px;
  background: yellow;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
}

.hello::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: red;
}

.hello::-webkit-scrollbar-track {
  border-radius: 18px;
  background-color: blue;
}

生成的滚动条可以看出三者关系\