美文网首页
使用CSS隐藏元素滚动条

使用CSS隐藏元素滚动条

作者: damon小萧 | 来源:发表于2020-05-22 23:08 被阅读0次

分享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隐藏元素滚动条

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