其他分享
首页 > 其他分享> > css设置滚动条样式

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

 

标签:container,样式,滚动条,scrollbar,rgba,webkit,sidebar,css
来源: https://www.cnblogs.com/zhangyezi/p/13667931.html