css设置滚动条样式

1,html

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

2,css

   /*滚动条整体样式*/
    .left-sidebar::-webkit-scrollbar,.img-container::-webkit-scrollbar{
         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,最后呈现的效果

原文地址:https://www.cnblogs.com/zhangyezi/p/13667931.html