利用css改变浏览器默认的滚动条样式

/* 设置滚动条的样式 */
    ::-webkit-scrollbar {
        width:8px;
        height: 2px;
    }
    /* 滚动槽 */
    ::-webkit-scrollbar-track {
        -webkit-box-shadow:inset 0 0 1px rgba(0,0,0,0.3);
/*inset后 第一个0表示：阴影水平偏移值（可取正负值）；第二个0：阴影垂直偏移值（可取正负值）；1px：阴影模糊值（越小表示越清晰）；rgba(0,0,0,0.3)：阴影颜色；*/
        border-radius:100px;
        opacity: 0;
    }
    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        border-radius:100px;
        background:rgba(0,0,0,0.1);
        -webkit-box-shadow:inset 0 0 0px rgba(0,0,0,0.5);
    }
    ::-webkit-scrollbar-thumb:window-inactive {
        background:#D8D8D8;
    }

效果如图

image.png