html - 在移动设备上禁用滚动

Question

我有一个简单的 HTML 页面，当我触摸 div 时，我们无法滚动。你可以在这里找到这个页面

如果您使用桌面浏览器（如 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;
}

然后添加媒体查询以有效地获得您的 or 语句。

Answer 2

我设法通过简单地添加以下内容来关闭我的移动滚动：

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

body {
  position: relative;
}

重要的是%不要vh为此使用。