浏览器滚动条样式重置

    /* 外层滚动条轨道 */
    ::-webkit-scrollbar-track  {
      background-color: violet;
    }
    
    /* 内层滚动条滚道样式（没有滑块的轨道部分） */
    ::-webkit-scrollbar-track-piece {
      width: 10px;
      height: 20px;
      background-color: yellowgreen; 
      -webkit-border-radius: 0;
      border-radius: 0; 
    }

    /* 滚动条整体样式 */
    ::-webkit-scrollbar {
      width: 6px; /*滚动条轨道的宽度*/
      height: 8px; /*滚动条轨道的高度*/
    }
    
    /* 垂直滚动条和水平滚动条交汇部分的样式 */
    ::-webkit-scrollbar-corner {
      background-color: black;
    }

    /* 垂直滚动条的样式 */
    ::-webkit-scrollbar-thumb:vertical {
      height: 100px;
      background-color: red;
      -webkit-border-radius: 6px;
      border-radius: 6px;
    }

    /* 水平滚动条的样式 */
    ::-webkit-scrollbar-thumb:horizontal {
      height: 200px;
      background-color: blue;
      -webkit-border-radius: 6px;
      border-radius: 6px;
    }

    /* 鼠标移上滚动条时的样式 */
    ::-webkit-scrollbar-thumb:hover {
      height: 100px;
      background-color: green;
      -webkit-border-radius: 6px;
      border-radius: 6px;
    }

    滚动条效果如下：

     

注意：
            -webkit-scrollbar-track-piece 会覆盖掉 -webkit-scrollbar-track的样式；
            -webkit-scrollbar-track  会覆盖掉  -webkit-scrollbar 的样式；
综上优先级： -webkit-scrollbar-track-piece > -webkit-scrollbar-track > -webkit-scrollbar
    

滚动条各个属性说明：

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar