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

这听起来像是应该有一个解决方案在互联网上，但我不知道为什么我找不到它。我想禁用移动设备上的水平滚动。基本上要做到这一点：

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

谢谢

把这个用在时尚上

body
{
overflow:hidden;
width:100%;
}

在头标签中使用此选项

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

---

cgvector答案对我不起作用，但它确实起了作用：

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

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

摘自这里：

尝试添加

html {
  overflow-x: hidden;
}

以及

body {
  overflow-x: hidden;
}

这对我很有用：

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)

---

为子孙后代：

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

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

它阻止的方式仍然比一些人希望的要多，但对于大多数浏览器来说，唯一被阻止的默认行为应该是滚动

对于一个更复杂的解决方案，允许在非滚动体中滚动元素，并防止橡胶带，请看我的答案：

---

相对的位置很重要，我只是一时糊涂。没有它就无法工作。

以下内容对我来说很有用，尽管我没有测试要测试的每个设备：-）

在页眉中，添加

在页面样式表中，添加

html，正文{
溢出x：隐藏；
溢出y：隐藏；
}

---

它是html和正文

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

滚动 要回答OP，您似乎只需要截取窗口的

滚动

和

触摸移动

事件，并调用

预防默认

和

停止播放

；像这样

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

function preventMotion(event)
{
    window.scrollTo(0, 0);
    event.preventDefault();
    event.stopPropagation();
}

在样式表中，确保

主体

和

html

标记包含以下内容：

html:
{
    overflow: hidden;
}

body
{
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
}

缩放 不过，滚动是一回事，但您可能也想禁用缩放。使用标记中的元标记执行以下操作：

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

所有这些加在一起给你一个类似应用程序的体验，可能是最适合画布的

（如果您使用画布，请注意一些人的建议，即在元标记中添加

初始缩放

和

宽度

等属性，因为画布会缩放其内容，这与块元素不同，而且您通常会得到丑陋的画布）.

CSS属性可以满足您的需求，尽管它在所有目标浏览器中都可以满足您的需求

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

---

在尝试所有答案都不成功后，我只需添加以下内容即可关闭手机滚动：

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

body {
  position: relative;
}

---

为此，使用

%

而不是

vh

非常重要。

高度：100%

是我一直缺少的东西，很疯狂。

将位置设置为相对位置对我不起作用。仅当我将body的位置设置为固定时，它才起作用：

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

---

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

body，html{
溢出x：隐藏；
位置：相对位置；
}

对于Apple设备

位置：相对

不起作用。以下代码适用于所有设备：

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

---

---

请参考此禁用滚动：您知道，您甚至禁用了垂直页面滚动，对吗？是的，这就是为什么它说，

需要一个更智能的逻辑来选择何时阻止滚动。我不能使用此功能，因为这也会阻止显示任何HTML 5
上下文菜单
（由Android版Firefox 20支持）。这仅仅是我的问题，还是完全不顾后果？Chango-完美的解决方案！当我在我的移动web应用程序上使用自定义滚动脚本时，这段代码最终一次解决了我的所有问题！溢出：隐藏和宽度：正文和html中的100%就足够了。thks！（在iPhone中！）阅读我的答案。我说将其添加到HTML标记中，而不仅仅是正文。在某些移动设备上，滚动会被完全禁用。同意@daekano，这个答案应该被标记为已接受的答案。这对我也有效。有人能解释一下position:relative是如何起作用的吗？我不敢相信position:relative；这么小的东西停止工作。谢谢！它工作了，但是破坏了触摸设备的平滑滚动…（我似乎无法向上推并看到页面滚动，一旦我松开手指，页面就停止滚动）无论出于何种原因，这在android设备上有效，但在任何IOS设备上都不起作用。我尝试在IOS上测试这一点，并与Safari以及android上的Chrome和Firefox完美配合。当前的Chrome版本需要这一点：
document.body.addEventListener（'touchmove'，function（e）{e.preventDefault（）；}，{passive:false}）
。请注意，对象变为
真
，因此使用事件捕获。在搜索和尝试了几个小时后，只有这种方法对我有效。我不知道我有多感谢你，伙计，你救了我的命！为
html
设置
溢出显然是必要的。没有它，但有了来自该网站的所有其他建议s线程仍有一些滚动。在我的情况下不需要阻止事件。正如@brannigan在另一条评论中提到的，使用
window.addEventListener（“touchmove”，preventMotion，{passive:false}）；
document.body.style.position = "fixed";
document.body.style.overflowY = "hidden";
document.body.addEventListener('touchstart', function(e){ e.preventDefault()});

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