无法阻止“touchmove"在 iOS 上滚动窗口 [英] 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 });

这是因为在 iOS 11.3 捆绑的 Safari 11.1 中，文档触摸事件监听器现在默认是被动的.此更改记录在 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:

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

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