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

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(); });

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

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

/sf/answers/1417507801/

Answer 4

尝试添加

html {
  overflow-x: hidden;
}

以及

body {
  overflow-x: hidden;
}

Answer 5

我怀疑大多数人都想要禁用缩放/滚动,以便组合更像应用程序的体验; 因为答案似乎包含缩放和滚动解决方案的元素,但没有人真的把它们钉在一起.

滚动

要回答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" />

所有这些组合在一起为您提供类似app的体验,可能是最适合画布的.

(如果你正在使用画布,请注意一些人添加initial-scale和width元标记等属性的建议,因为画布会缩放它们的内容,与块元素不同,你会得到一个丑陋的画布,通常不会).

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