美文网首页F2e踩坑之路
CSS实现隐藏滚动条但是可以滚动

CSS实现隐藏滚动条但是可以滚动

作者: 祈澈菇凉 | 来源:发表于2019-04-10 15:30 被阅读90次

    今天记录一个很小的问题,在工作之中会经常遇到的,当页面元素溢出的时候会产生滚动条,这个时候需要页面样式优化:CSS实现隐藏滚动条但是可以滚动。


    body::-webkit-scrollbar {
        display: none;
    }
    

    示例代码

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                .cont {
                    width: 200px;
                    height: 200px;
                    border: 1px solid #000000;
                    overflow-x: hidden;
                }
                
                .cont::-webkit-scrollbar {
                    display: none;
                }
            </style>
        </head>
    
        <body>
            <div class="cont">
                <p>王小婷</p>
                <p>王小婷</p>
                <p>王小婷</p>
                <p>王小婷</p>
                <p>王小婷</p>
                <p>王小婷</p>
            </div>
        </body>
    
    </html>
    

    原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
    90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,可以加入qq技术交流群聊:649040560。

    相关文章

      网友评论

        本文标题:CSS实现隐藏滚动条但是可以滚动

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