在所有移动设备中禁用滚动

Posted 2023-03-31

【中文标题】在所有移动设备中禁用滚动

【英文标题】：Disable scrolling in all mobile devices

【发布时间】：2012-05-14 23:39:13

【问题描述】：

这听起来应该在整个互联网上都有解决方案，但我不确定为什么我找不到它。我想在移动设备上禁用水平滚动。基本上试图实现这一点：

body
   overflow-x:hidden  // disable horizontal scrolling.

这可能是相关信息：我的 head 标签中也有这个，因为我也不希望用户能够缩放：

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />

谢谢

【问题讨论】：

参考这个来禁用滚动：***.com/questions/2527899/…

该链接更适合使用 android webview 的应用开发者

【参考方案1】：

html, body 
  overflow-x: hidden;

body 
  position: relative;

相对位置很重要，我只是偶然发现了它。没有它就无法工作。

【讨论】：

同意@daekano 这个答案应该被标记为接受的答案。这也对我有用。

谁能解释一下 position:relative 是如何帮助这项工作的？

我无法相信像 position: relative; 这样小的东西。使它无法工作。谢谢！

它可以工作，但会破坏触摸设备的平滑滚动...（我似乎无法向上推并看到页面滚动，只要我松开手指，它就会停止滚动）

无论出于何种原因，这适用于 android 设备，但不适用于我尝试的任何 ios 设备

【参考方案2】：

cgvector 答案对我不起作用，但确实如此：

document.body.addEventListener('touchstart', function(e) e.preventDefault(); );

我不会就这样离开它，需要更智能的逻辑来选择何时阻止滚动，但这是一个好的开始。

取自这里： Disable scrolling in an iPhone web application?

【讨论】：

你明白，你甚至禁用垂直页面滚动，对吧？

是的，这就是为什么它说a smarter logic is needed to select when to prevent the scrolling。

我不能使用它，因为这也会阻止任何 HTML 5 contextmenu 显示（支持 Firefox 20 for Android）。

是我自己还是这看起来完全鲁莽？

Chango - 完美解决方案！当我在我的移动网络应用上使用自定义滚动脚本时，这段代码终于一次性解决了我所有的问题！

【参考方案3】：

为了后代：

要防止滚动但保留上下文菜单，请尝试

document.body.addEventListener('touchmove', function(e) e.preventDefault(); );

它仍然比某些人更喜欢阻止，但对于大多数浏览器来说，唯一阻止的默认行为应该是滚动。

对于一个更复杂的解决方案，允许在不可滚动的主体内滚动元素并防止橡皮筋，看看我的答案在这里：

https://***.com/a/20250111/1431156

【讨论】：

刚刚对此进行了测试，并与 iOS 上的 Safari 以及 Android 上的 Chrome 和 Firefox 完美配合。

当前的 Chrome 版本需要这个：document.body.addEventListener('touchmove', function(e) e.preventDefault(); , passive: false );。请注意，对象变为true，因此使用了事件捕获。

【参考方案4】：

我怀疑大多数人真的想禁用缩放/滚动，以提供更像应用程序的体验；因为答案似乎包含缩放和滚动解决方案的元素，但没有人真正确定其中任何一个。

滚动

要回答 OP，要禁用滚动，您似乎唯一需要做的就是拦截窗口的 scroll 和 touchmove 事件，并在它们生成的事件上调用 preventDefault 和 stopPropagation；像这样

window.addEventListener("scroll", preventMotion, false);
window.addEventListener("touchmove", preventMotion, false);

function preventMotion(event)

    window.scrollTo(0, 0);
    event.preventDefault();
    event.stopPropagation();

在您的样式表中，确保您的 body 和 html 标签包含以下内容：

html:

    overflow: hidden;


body

    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;

缩放

但是，滚动是一回事，但您可能还想禁用缩放。您对标记中的元标记执行的操作：

<meta name="viewport" content="user-scalable=no" />

所有这些加在一起为您提供类似应用程序的体验，可能最适合画布。

（如果您使用画布，请注意某些人的建议，即在元标记中添加 initial-scale 和 width 等属性，因为与块元素不同，画布 缩放 其内容，而且你经常会得到一个丑陋的画布）。

【讨论】：

经过几个小时的搜索和尝试，只有这种方法对我有用。我不知道我多么感谢你，伙计，你救了我的命！

为html 设置overflow 显然是必要的。没有它，但有了这个线程的所有其他建议，仍然会发生一些滚动。在我的情况下，不需要预防事件。

正如@brannigan 在另一条评论中提到的，使用window.addEventListener("touchmove", preventMotion, passive: false );

【参考方案5】：

尝试添加

html 
  overflow-x: hidden;

还有

body 
  overflow-x: hidden;

【讨论】：

阅读我的回答。我说将它添加到 HTML 标记中，而不仅仅是正文。

在某些移动设备上完全禁用滚动。

【参考方案6】：

在风格中使用它

body

overflow:hidden;
width:100%;

在head标签中使用这个

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />

【讨论】：

overflow:hidden 和 width:100% 在 body 和 html 中都足够了。谢谢！ （在 iPhone 中！）

【参考方案7】：

在页眉中添加

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

在页面样式表中，添加

html, body 
  overflow-x: hidden;
  overflow-y: hidden;

既是html又是body！

【参考方案8】：

CSS 属性 touch-action 可能会为您提供所需的内容，尽管它在所有目标浏览器中都是 may not work。

html, body 
    width: 100%; height: 100%;
    overflow: hidden;
    touch-action: none;

【参考方案9】：

将 position 设置为 relative 对我不起作用。仅当我将 body 的位置设置为 fixed 时才有效：

document.body.style.position = "fixed";
document.body.style.overflowY = "hidden";
document.body.addEventListener('touchstart', function(e) e.preventDefault());

【参考方案10】：

这对我有用：

window.addEventListener("touchstart", function(event)
             if(event.target.tagName=="HTML" || event.target.tagName=="BODY")
                     event.preventDefault();
             
 ,false);

它不能 100% 工作，我还添加了这个：

window.addEventListener("scroll",function()
    window.scrollTo(0,0)
,false)

【参考方案11】：

在尝试所有答案都没有成功后，我设法通过简单地添加以下内容来关闭我的移动滚动：

html,
body 
  overflow-x: hidden;
  height: 100%;


body 
  position: relative;

为此使用% 而不是vh 很重要。 height: 100% 是我一直想念的东西，疯了。

【讨论】：

我希望我能在 24 小时前偶然发现您的答案，因为这样可以节省我一大堆时间来得出相同的结论。高度：100% 是我需要让它全部工作的缺失部分。因为我使用的 body 的每个子元素都是 position: absolute，所以它没有给 body 元素设置高度。

【参考方案12】：

对于 Apple 设备，position: relative 不起作用。以下代码适用于所有设备：

html, body 
  overflow: hidden;
  position: fixed;

【参考方案13】：

我迟到了，但我添加了这个答案，因为我尝试过的其他方法在我的具体情况下都不起作用。捕获 touchmove、scroll 等事件的组合没有任何效果，并且 position: relative on body 使一切都消失了。

我发现我必须在 HTML 和 BODY 元素上添加 height: 100% 。可能并非所有以下规则都是必需的，但我花了足够长的时间才偶然发现这个神奇的组合并且它似乎有效。

html 
    height: 100%;
    overflow: hidden;

body
    margin: 0;
    overflow: hidden;
    height: 100%;
    position: relative;

除此之外，我在 HTML 头中还有以下内容：

<meta name="viewport" content="width=device-width, initial-scale=1">

我的应用大量使用了绝对位置元素，其中一些元素在不同时间部分滑出屏幕，因为它们滑出视野。结果，body 元素中没有任何内容可以给 body 任何区域/大小。

我发现移动设备上发生的“滚动”是由于浏览器不知道页面大小的范围以进行视口（缩放到设备宽度）计算的结果。似乎高度为 0px 的 body 无法向浏览器传达页面的高度或宽度，因此将 body 的高度设置为 100% 是解决方案的关键。

编辑：找到我的解决方案后再次查看答案，我意识到“Toms Codery”的另一个答案与我的解决方案基本相同，尽管他只是在 x 方向。

【参考方案14】：

最简单的方式，非常简单，只有 CSS 代码：

body, html 
    overflow-x: hidden;
    position: relative;

【参考方案15】：

以下对我有用，虽然我没有测试每一个要测试的设备:-)

$('body, html').css('overflow-y', 'hidden');
$('html, body').animate(
    scrollTop:0
, 0);