CSS 滚动条（scrollbar）的样式设置

1.滚动条的滚动方向

overflow:scroll /* x y 方向都会*/
或者
overflow-x:scroll /*只是x方向*/
或者
overflow-y:scroll  /*只是y方向*/

2.滚动条的属性

::-webkit-scrollbar    //滚动条整体部分
::-webkit-scrollbar-button   //滚动条两端的按钮
::-webkit-scrollbar-track   // 外层轨道
::-webkit-scrollbar-track-piece    //内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个
::-webkit-scrollbar-corner   //边角
::-webkit-resizer   ///定义右下角拖动块的样式

3.最常用的就是修改外层轨道和可以拖动的那个

 ::-webkit-scrollbar-track{
    background-color: transparent;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-image: -webkit-linear-gradient(
      45deg,
      hsla(0, 0%, 100%, 0.2) 25%,
      transparent 0,
      transparent 50%,
      hsla(0, 0%, 100%, 0.2) 0,
      hsla(0, 0%, 100%, 0.2) 75%,
      transparent 0,
      transparent
    );
  }

 这样样式就修改好了

参考文档：https://segmentfault.com/a/1190000012800450