css设置滚动条样式

 

1，html

 <div class="left-sidebar"></div>

2，css

 　　/*滚动条整体样式*/
    .left-sidebar::-webkit-scrollbar,.img-container::-webkit-scrollbar{
        width: 3px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 3px;
    }
    /*滚动条里面小方块*/
    .left-sidebar::-webkit-scrollbar-thumb,.img-container::-webkit-scrollbar-thumb {
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.2);
    }
    /*滚动条里面轨道*/
    .left-sidebar::-webkit-scrollbar-track,.img-container::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);
        border-radius: 0;
        background: rgba(0,0,0,0);
    }

3，最后呈现的效果