使用CSS隐藏元素滚动条

分享2种方法实现CSS如何隐藏滚动条并且还是滚动啦!

方法一:偷梁换柱法

    .dpape-box {
        width: 300px;
        height: 200px;
        overflow: hidden;
        border: 1px solid #f1f1f1;
    }
    
    .dpape-box .dpape-scroll {
        width: 320px;
        overflow: hidden;
        height: 200px;
        overflow-y: scroll;
    }
    /* 20px 几乎在所有浏览器都看不见*/
    
     .dpape-box .dpape-scroll .dpape-ctx {
        padding-right: 20px;
    }

方法二:css伪类大法(如果需要考虑兼容性问题建议使用偷梁换柱法)

    .dpape-box {
        overflow: hidden;
        width: 300px;
        height: 200px;
        overflow-y: scroll;
        /* Firefox */
        scrollbar-width: none;
        /* IE 10+ */
        -ms-overflow-style: none;
    }
    
    .dpape-box::-webkit-scrollbar {
        /* Chrome Safari */
        display: none;
    }

下一回将分析自定义好看的滚动条,尽情期待哦!!!!

你可能感兴趣的:(使用CSS隐藏元素滚动条)