无法阻止“touchmove”在 iOS 上滚动窗口

Question

我们试图在我们的 iOS 网络应用程序上滚动一个元素，同时阻止窗口本身滚动。我们正在捕获窗口上的touchmove 事件，以编程方式滚动元素并（试图）通过在事件上调用preventDefault 来阻止窗口本身滚动。

很遗憾，这在 Mobile Safari 中不起作用。窗口继续在我们的元素下方滚动。这个问题听起来与https://bugs.webkit.org/show_bug.cgi?id=163207 中描述的 Webkit 错误一模一样，但据说这个问题已在 iOS 10.3 中修复，而我正在运行 11.3。

捕获touchforcestart 并调用preventDefault 似乎确实阻止了窗口的滚动，但我们在touchstart 中调用它，这似乎“为时已晚”，因为窗口仍在滚动。只有在下次调用 touchstart 时才会阻止滚动。

对正在发生的事情有任何想法吗？我们很困惑，因为这显然是一个错误，但似乎已经在一段时间前修复了。

Answer 1

您需要将 preventDefault 绑定到两个事件：touchmove 和 touchforcechange 以使其在 ios 11 中工作，例如

document.addEventListener('touchmove', this.preventDefault, {passive: false});
document.addEventListener('touchforcechange', this.preventDefault, {passive: false});

而且你应该在touchstart之前绑定它们

如果您将它们绑定在 touchstart 或 dragStart 处理程序中，它们只能阻止在下一次拖动时滚动。

Answer 2

我最近遇到了同样的问题。在注册touchmove 事件监听器时，您需要传递{ passive: false }。例如

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
}, { passive: false });

这是因为在与 iOS 11.3 捆绑在一起的 Safari 11.1 中，文档触摸事件侦听器现在默认是被动的。此更改记录在 Safari 11.1 release notes：

网络 API

• [...]
• 更新了根文档触摸事件侦听器以使用被动模式提高滚动性能并减少崩溃。