无法阻止iOS上滚动窗口的“touchmove” [英] Can't prevent `touchmove` from scrolling window on iOS

问题描述

我们正在尝试滚动iOS网络应用上的元素，同时防止窗口本身滚动。我们正在窗口上捕获 touchmove 事件，以编程方式滚动元素并（尝试）通过调用 preventDefault 关于活动。

We are trying to scroll an element on our iOS web app while preventing the window itself from scrolling. We are capturing the touchmove event on the window, scrolling the element programmatically and (trying to) prevent the window itself from scroll by calling preventDefault on the event.

不幸的是，这在Mobile Safari中不起作用。窗口继续在我们的元素下滚动。问题听起来与 https://bugs.webkit.org/show_bug中描述的Webkit错误完全相同.cgi？id = 163207 ，但该问题在iOS 10.3中已修复，而我运行的是11.3。

Unfortunately this doesn't work in Mobile Safari. The window continues to scroll underneath our element. The issue sounds exactly like the Webkit bug described in https://bugs.webkit.org/show_bug.cgi?id=163207, but that issue was supposedly fixed in iOS 10.3 whereas I am running 11.3.

捕获 touchforcestart 并且调用 preventDefault 似乎阻止了窗口的滚动，但我们在 touchstart ，因为窗口仍然滚动，这似乎太晚了。只有在下次调用 touchstart 时才会阻止滚动。

Catching touchforcestart and calling preventDefault does seem to prevent scrolling of the window, but we are calling it in touchstart, which seems to be "too late" since the window still scrolls. Scrolling is only prevented next time touchstart is called.

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

Any ideas about what is going on? We are baffled since this is clearly a bug but it seems to have been fixed some time ago.

推荐答案

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

I recently ran into this same problem. You'll need to pass { passive: false } when registering the touchmove event listener. e.g.

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

这是因为默认情况下，文档触摸事件监听器在Safari 11.1中是被动的，它与iOS捆绑在一起11.3。 Safari 11.1中记录了此更改发行说明：

This is because document touch event listeners are now passive by default in Safari 11.1, which is bundled with iOS 11.3. This change is documented in the Safari 11.1 release notes:

Web API

• [...]


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

这篇关于无法阻止iOS上滚动窗口的“touchmove”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！