75

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

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

谢谢

4

15 回答 15

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

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

于 2014-06-24T16:54:53.897 回答
30

cgvector 答案对我不起作用,但这确实:

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

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

取自这里: 禁用 iPhone Web 应用程序中的滚动?

于 2012-05-24T14:03:03.440 回答
23

对于后代:

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

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

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

要获得更复杂的解决方案,允许在不可滚动的主体中使用可滚动元素并防止橡皮筋,请在此处查看我的答案:

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

于 2013-11-26T12:45:52.100 回答
17

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

滚动

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

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

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

在您的样式表中,确保您的bodyhtml标签包括以下内容:

html:
{
    overflow: hidden;
}

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

缩放

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

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

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

(如果您使用画布,请注意某些人的建议,即在元标记中添加initial-scale和之类的属性,因为与块元素不同,画布会缩放其内容,并且您通常会得到一个丑陋的画布)。width

于 2016-02-03T07:43:08.417 回答
14

尝试添加

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}
于 2013-10-21T14:06:54.503 回答
7

在风格上使用它

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" />
于 2012-05-15T06:25:47.567 回答
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 又是正文!

于 2015-10-05T19:15:56.350 回答
3

CSS 属性touch-action可能会为您提供所需的内容,尽管它可能不适用于所有目标浏览器。

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    touch-action: none;
}
于 2019-06-13T18:20:05.463 回答
3

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

document.body.style.position = "fixed";
document.body.style.overflowY = "hidden";
document.body.addEventListener('touchstart', function(e){ e.preventDefault()});
于 2020-11-14T01:02:52.260 回答
2

这对我有用:

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)
于 2013-10-29T22:40:18.177 回答
2

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

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

body {
  position: relative;
}

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

于 2020-08-08T12:22:35.680 回答
1

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

html, body {
  overflow: hidden;
  position: fixed;
}
于 2021-06-02T05:08:14.193 回答
1

我参加聚会迟到了,但我添加了这个答案,因为我尝试过的其他任何事情都没有在我的特定情况下起作用。捕获 touchmove、scroll 等事件的组合没有任何效果,并且 position: relative 在身体上使一切都消失了。

我发现我必须在 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 的主体无法向浏览器传达页面的高度或宽度,因此将主体的高度设置为 100% 是解决方案的关键。

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

于 2021-07-29T03:09:45.273 回答
0

简单的方法,仅使用 CSS代码就非常简单:

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

于 2021-02-22T22:08:10.653 回答
-2

以下对我有用,尽管我没有测试要测试的每一个设备:-)

$('body, html').css('overflow-y', 'hidden');
$('html, body').animate({
    scrollTop:0
}, 0);
于 2015-08-31T13:55:04.867 回答