Question

我有一个简单的HTML页面，当我触摸div时，我们无法滚动。您可以在here

页面找到此页面

如果您使用桌面浏览器（例如firefox）打开此页面，如果您按住div而无法滚动。

现在我想在移动设备上使用此行为，例如Android。实际上在Android上，如果你打开这个页面，你可以在任何情况下滚动。

对不起我的例子中的颜色;）

Answer 1

我想你问的是如何在移动设备上禁用滚动：

您可以为touchstart和touchmove添加事件监听器。然后，当触发这些事件时，使用Modernizr来检测浏览器是否是触摸设备。显然，并非所有手机都是触控设备，并且有触控设备具有高分辨率，因此可随意添加或if语句。

document.addEventListener('touchstart', this.touchstart);
document.addEventListener('touchmove', this.touchmove);

function touchstart(e) {
    e.preventDefault()
}

function touchmove(e) {
    e.preventDefault()
}

或者，只需使用Modernizr然后使用CSS：

html.touch body {
     overflow:hidden;
}

然后添加媒体查询以有效地获得您的或陈述。

Answer 2

通过添加以下内容，我设法关闭了移动滚动：

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

body {
  position: relative;
}

为此使用%而非vh很重要。

禁用移动设备上的滚动

2 个答案: