css设置滚动条样式

滚动条几个属性，主要有下面7个属性

::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track  外层轨道
::-webkit-scrollbar-track-piece  内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
————————————————

 

 

 

      & > div:first-child {
        width: 48%;
        height: 45vh;
        overflow: auto;
        &::-webkit-scrollbar{ // 滚动条宽度
          width: 4px;
        }
        &::-webkit-scrollbar-thumb { // 滚动条的样式
           border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.2);
        }
        &::-webkit-scrollbar-track { // 滚动条的外层轨道
          -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
          border-radius: 0;
          background: rgba(0,0,0,0.1);
        }
      }