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

Question

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

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

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

<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" />

谢谢

Answer 1

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

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

Answer 2

cgvector 答案对我不起作用，但这样做了：

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

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

取自此处： 禁用 iPhone Web 应用程序中的滚动？

Answer 3

为后代：

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

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

它仍然阻止了一些人可能喜欢的方式，但对于大多数浏览器，唯一阻止的默认行为应该是滚动。

对于允许在不可滚动主体中使用可滚动元素并防止橡皮筋的更复杂的解决方案，请在此处查看我的答案：

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

Answer 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类的属性，因为画布会缩放其内容，与块元素不同，您最终会得到一个丑陋的画布，往往不是）。

Answer 5

尝试添加

html {
  overflow-x: hidden;
}

也

body {
  overflow-x: hidden;
}

Answer 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" />

Answer 7

在页眉中添加

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

在页面样式表中，添加

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

它既是 html 又是正文！

Answer 8

CSS 属性touch-action可能会得到您想要的东西，尽管它可能不适用于您的所有目标浏览器。

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

Answer 9

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

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

Answer 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)

Answer 11

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

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

body {
  position: relative;
}

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

Answer 12

最简单的方法，仅使用 CSS代码就非常简单：

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

Answer 13

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

html, body {
  overflow: hidden;
  position: fixed;
}

Answer 14

我参加聚会迟到了，但我添加了这个答案，因为我尝试过的其他任何事情都没有在我的特定情况下起作用。 捕获 touchmove、scroll 等事件的组合没有任何效果，并且 position: relative 在 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 方向上。

Answer 15

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

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

Answer 16

这样可以防止在移动设备上滚动，但不能单击/单击。

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