更改滚动条

1.更改滚动条样式

/* 滚动条有滑块的轨道部分 */
    ::-webkit-scrollbar-track-piece {
        background-color: #000000;
        border-radius: 0;
    }
    /* 整个滚动条 */
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        display: block;
    }
    /* 滚动条竖向滑块 */
    ::-webkit-scrollbar-thumb:vertical {
        background-color: rgba(211,211,211,1.000);
        border-radius: 2px;
    }
    /* 滚动条竖向滑块hover */
    ::-webkit-scrollbar-thumb:vertical:hover {
        background-color: rgba(128,128,128,1.000);
        border-radius: 4px;
    }
    /* 滚动条横向滑块 */
    ::-webkit-scrollbar-thumb:horizontal {
        background-color: rgba(211,211,211,1.000);
        border-radius: 2px;
    }
    /* 滚动条横向滑块hover */
    ::-webkit-scrollbar-thumb:horizontal:hover {
        background-color: rgba(128,128,128,1.000);
        border-radius: 4px;
    }
    /* 同时有垂直和水平滚动条时交汇的部分 */
    ::-webkit-scrollbar-corner {
        display: block;    /* 修复交汇时出现的白块 */
    }

2.更改完成后的样子

• 1.鼠标未放上去的时候

  
  
  image.png

• 2.鼠标放上去的时候

  
  
  image.png

3.具体颜色根据项目主题，自己去配置