自定义滚动条相关

.all-list::-webkit-scrollbar {
    width: 13px;
    height: 0;
    cursor: pointer;
}

.all-list::-webkit-scrollbar-thumb {
    width: 13px;
    height: 36px;
    background: url(../img/accidentCenter/sgsb/thumb.png) no-repeat center center;
    background-size: contain;
}

.all-list::-webkit-scrollbar-track {
    background-color: #020611;
    -webkit-box-shadow: 0 0 10px 10px #034880;
}

注意:使用图片作为滑块时,

        若设置 background-size: contain; 则滑块无法贴顶/贴底

        若设置 background-size: cover; 图片则无法显示完全(建议使用可以平铺类的图片)

【若想要隐藏滚动条,但又想可以滚动,可以通过设置滚动条宽高为0实现】

::-webkit-scrollbar{width: 0px;height: 0px;}

 

posted @ 2020-10-26 11:02  _0123456789  阅读(77)  评论(0编辑  收藏  举报