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

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


5640239-427f98fddfc98d70.png
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>
5640239-83bb85300a34c84a.png

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

猜你喜欢

转载自blog.csdn.net/qq_36538012/article/details/89200121