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

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

谢谢

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

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

cgvector答案对我不起作用，但这确实有效：

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

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

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

对于子孙后代：

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

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

它仍然可以阻止某些人想像的事情，但是对于大多数浏览器而言，唯一阻止的默认行为应该是滚动。

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

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

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

卷动

为了回答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标签执行的操作：

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

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

（警惕一些建议添加属性像initial-scale和width元标记，如果您使用的是画布，画布因规模及其内容，不象块元素，你会得一个丑陋的帆布，往往不是）。

尝试添加

html {
  overflow-x: hidden;
}

以及

body {
  overflow-x: hidden;
}

用这个风格

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

在页面标题中，添加

<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又是正文！

CSS属性touch-action可能会为您提供所需的东西，尽管它可能无法在所有目标浏览器中使用。

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

这对我有用：

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)

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

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

body {
  position: relative;
}

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

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

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

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

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

以下对我有用，尽管我没有测试每台设备都要进行测试:-)

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