css滾動條樣式重寫（兼容ie和谷歌）

/* 清除滑條樣式 */
::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: none;
}

/*chrome--------------------------------------------start*/
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0);
    border-radius: 6px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(201, 201, 202, 1);
    border-radius: 6px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgba(162, 162, 163, 1);
}
/*chrome--------------------------------------------end*/
/*IE--------------------------------------------start*/
* {
    /*三角箭頭的顏色*/
    scrollbar-arrow-color: #c0c4cc;
    /*滾動條滑塊按鈕的顏色*/
    scrollbar-face-color: #A2A2A3;
    /*滾動條整體顏色*/
    scrollbar-highlight-color: #A2A2A3;
    /*滾動條陰影*/
    scrollbar-shadow-color: #A2A2A3;
    /*滾動條軌道顏色*/
    scrollbar-track-color: #f4f4f5;
    /*滾動條3d亮色陰影邊框的外觀顏色——左邊和上邊的陰影色*/
    scrollbar-3dlight-color: #A2A2A3;
    /*滾動條3d暗色陰影邊框的外觀顏色——右邊和下邊的陰影色*/
    scrollbar-darkshadow-color: #A2A2A3;
    /*滾動條基准顏色*/
    scrollbar-base-color: #f4f4f5;
}
/*IE--------------------------------------------end*/

 

參考文章：https://blog.csdn.net/weixin_44135807/article/details/101204190?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task