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

Question

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

如果您使用桌面浏览器(如 firefox)打开此页面，如果您按住并单击 div，则无法滚动。

现在我想在移动设备(例如 Android)上实现这种行为。事实上，在 Android 上，如果您打开此页面，您可以在任何情况下滚动。

抱歉我示例中的颜色；)

Answer 1

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

您可以为 touchstart 和 touchmove 添加事件监听器。然后当这些事件被触发时使用 Modernizr检测浏览器是否为触摸设备。显然不是所有的移动设备都是触摸设备，并且有高分辨率的触摸设备，所以可以随意添加 or 到 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 语句。