美文网首页
通过css隐藏滚动条

通过css隐藏滚动条

作者: NuoQiX | 来源:发表于2018-10-10 11:35 被阅读0次

    将类名添加到想要隐藏滚动条的容器上,注意需要设置一个高度。

    /*滚动条隐藏*/
    
    /*webkit内核*/
    .scrollHide::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    .scrollHide::-webkit-scrollbar-button    {
        background-color:rgba(0,0,0,0);
    }
    .scrollHide::-webkit-scrollbar-track     {
        background-color:rgba(0,0,0,0);
    }
    .scrollHide::-webkit-scrollbar-track-piece {
        background-color:rgba(0,0,0,0);
    }
    .scrollHide::-webkit-scrollbar-thumb{
        background-color:rgba(0,0,0,0);
    }
    .scrollHide::-webkit-scrollbar-corner {
        background-color:rgba(0,0,0,0);
    }
    .scrollHide::-webkit-scrollbar-resizer  {
        background-color:rgba(0,0,0,0);
    }
    /*o内核*/
    .scrollHide .-o-scrollbar{
        -moz-appearance: none !important;
        background: rgba(0,255,0,0) !important;
    }
    .scrollHide::-o-scrollbar-button    {
        background-color:rgba(0,0,0,0);
    }
    .scrollHide::-o-scrollbar-track     {
        background-color:rgba(0,0,0,0);
    }
    .scrollHide::-o-scrollbar-track-piece {
        background-color:rgba(0,0,0,0);
    }
    .scrollHide::-o-scrollbar-thumb{
        background-color:rgba(0,0,0,0);
    }
    .scrollHide::-o-scrollbar-corner {
        background-color:rgba(0,0,0,0);
    }
    .scrollHide::-o-scrollbar-resizer  {
        background-color:rgba(0,0,0,0);
    }
    /*IE10,IE11,IE12*/
    .scrollHide{
        -ms-scroll-chaining: chained;
        -ms-overflow-style: none;
        -ms-content-zooming: zoom;
        -ms-scroll-rails: none;
        -ms-content-zoom-limit-min: 100%;
        -ms-content-zoom-limit-max: 500%;
        -ms-scroll-snap-type: proximity;
        -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
        -ms-overflow-style: none;
        overflow: auto;
    }
    

    *火狐需要单独通过js来设置

    相关文章

      网友评论

          本文标题:通过css隐藏滚动条

          本文链接:https://www.haomeiwen.com/subject/itlpaftx.html