使用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;
    }

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。