css自定义滚动条

<!-- 滚动条 -->
        <div id="test">
            <div id="testPic">
                <img src="" width="100%" height="100%">
            </div>
        </div>

css

/* 滚动条样式 */

#test{
    width: 328px;
    height: 275px;
    position: absolute;
    top: 112px;
    left: 499px;
    overflow: auto; /* 一定要加 */
}

/* testPic的width超了test的width就会出现x轴滚动条 height同理 */
#testPic {
    width: 100%;
    height: 400px;
    margin: 0 auto;
}

#test::-webkit-scrollbar  {
    /*高宽分别对应横竖滚动条的尺寸*/
    width: 4px;
    height: 4px;
}

/*滚动条里面小方块*/
#test::-webkit-scrollbar-thumb {
    /* border-radius: 10px !important; */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
    /* 颜色 */
    /* background:#b6b6b6!important; */
    /* 线性渐变背景 */
    background: #87E2E7 !important;
}

/*滚动条轨道*/
#test::-webkit-scrollbar-track {
    /* border-radius: 10px !important; */ /* 圆角边框 */
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
    background: #1B7271 !important;
}