CSS 实现隐藏滚动条同时又可以滚动（转载）

最新推荐文章于 2024-04-21 09:10:41 发布

$(薛定谔的喵)

最新推荐文章于 2024-04-21 09:10:41 发布

阅读量406

点赞数

分类专栏： web前端文章标签： CSS 实现隐藏滚动条同时又可以滚动（转载）

本文链接：https://blog.youkuaiyun.com/Chad97/article/details/88870668

版权

web前端专栏收录该内容

42 篇文章

订阅专栏

本文探讨了如何在移动端页面上隐藏滚动条以提供更原生的体验，同时确保页面仍可滚动。通过使用WebKit的::-webkit-scrollbar伪对象选择器，可以实现这一目标。此外，还介绍了兼容PC浏览器（如IE、Firefox）的方法，利用CSS和额外的容器层来隐藏滚动条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端页面为了更接近原生的体验，是否可以隐藏滚动条，同时又保证页面可以滚动？

使用 overflow:hidden 隐藏滚动条，但存在的问题是：页面或元素失去了滚动的特性。
由于只需要兼容移动浏览器（Chrome 和 Safari），于是想到了自定义滚动条的伪对象选择器
::-webkit-scrollbar。

关于这个选择器的介绍可以参考：
Styling Scrollbars
Custom Scrollbars in WebKit

应用如下 CSS 可以隐藏滚动条：

.element::-webkit-scrollbar {display:none}

如果要兼容 PC 其他浏览器（IE、Firefox 等），国外一位才人 John Kurlak 也研究出了一种办法。在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样，就变相隐藏了。

     <div class="outer-container">
         <div class="inner-container">
            <div class="content">
                ......
            </div>
         </div>
     </div>
    .outer-container,.content {
        width: 200px; height: 200px;
    }
    .outer-container {
        position: relative;
        overflow: hidden;
    }
    .inner-container {
        position: absolute; left: 0;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    
     /* for Chrome */
    .inner-container::-webkit-scrollbar {
        display: none;
    }