移动端设置了overflow-hidden页面还会滚动的禁止方

前言

在移动设备上的网页开发中，我们有时会遇到一个问题：即使在设置了 overflow:hidden 的情况下，页面仍然可以滚动。这对于正在进行 SEO 优化或开发移动应用的开发者来说，可能会带来不小的困扰。将针对这一问题，分享一些有效的解决方法，帮助大家更好地控制页面的滚动行为。

我们先来了解一下这个问题出现的原因。如果把 overflow:hidden 用在 body 标签上，由于移动端是基于 touch 事件，用户依然可以通过触摸屏幕进行滚动操作，因此页面还是会滚动。那么，我们该如何解决这个问题呢？

方法一：

我们可以通过添加一个新的包裹层 div 来解决这个问题。将要隐藏滚动的内容放在这个 div 里，然后给这个 div 设置高度为 window.height()，同时应用 overflow:hidden 属性。这样一来，即使页面可以滚动，但由于包裹层的高度限制，内容也不会溢出。

方法二：

另一种解决方法是给 body 标签添加 position:fixed 属性。这样，无论用户如何滚动页面，body 元素都会固定在屏幕的左上角（left:0; top:0;），从而阻止页面的滚动。结合 overflow:hidden 属性，可以确保内容不会溢出。示例代码如下：

body {

overflow:hidden;

position:fixed;

left:0;

top:0;

}

以上就是解决移动端设置 overflow:hidden 后页面仍然滚动问题的两种方法。希望这些方法能对大家的学习和工作有所帮助。如果有任何疑问或需要进一步的交流，欢迎留言讨论。感谢大家对狼蚁SEO的支持与关注。我们会持续分享更多有价值的内容，帮助大家解决开发过程中的问题。

我们了解了在移动端设置 overflow:hidden 后页面仍然滚动的问题及其解决方法。方法一通过添加包裹层 div 并设置高度和 overflow 属性来解决问题；方法二通过给 body 添加 position:fixed 属性来固定页面并阻止滚动。希望这些方法能帮助大家更好地控制页面的滚动行为，提升用户体验和 SEO 效果。