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,最后呈现的效果

css设置滚动条样式

 

上一篇:自动创建vuepress侧边栏


下一篇:第一行Kotlin系列(三)Intent 向上一页返回数据onActivityResult的使用