javascript - native 滚动延迟或停止 iOS 上的 JavaScript 执行

Question

这不是特定的 JS 代码问题，而是 iOS 处理 JS 的方式在我的网站上导致的问题比其他大多数问题都多。

仅在 iOS 上(在 Android 上不会发生)如果我 native 滚动(向上/向下)然后尝试在滚动完成之前(非常快)激活一些 JS，那么它会完全忽略 JS。

我相信 Apple 这样做是为了让 UX 始终保持优先级(不要让任何蹩脚的 JS 拖慢用户的速度)，但在这种情况下，它只是我想要允许运行的一段非常简单的 JS。

例如，如果用户正在滚动，然后快速按下屏幕顶部的选项卡以打开固定导航面板，那么如果 native 滚动仍在发生，则不会注册。如果他们再次按下它(滚动完成)，那么它就会起作用。

我还使用 JS slider 在图像中水平滚动，如果我试图在 native 向上/向下滚动完成之前向左/向右滚动，它有点跳跃并且不是很好的用户体验。我认为它优先考虑 native 滚动，但仍然以某种延迟激活水平滚动。

这不是一个大问题，但并不完美。如果每个人都慢慢地浏览网站并等待原生滚动完全停止，那就太好了。但人们当然不会这样做。

我认为阻止默认行为不会有任何作用。我曾尝试在 iOS 上接管原生滚动，但我认为你做不到。

我认为这可能在许多网站上确实发生过。我刚刚试图通过在 iPhone 上访问 stackoverflow.com 来找到一个很好的例子，如果你快速滚动然后在滚动完成之前快速点击一个链接，它就不会注册。我不认为文本链接是一个很大的 UX 问题，但是顶部的水平 slider 和大的“打开菜单”按钮更有可能在 native 滚动结束之前被快速点击(因为你不需要在按下之前阅读某些内容，例如文本链接)。

我在网站上有各种 JS 脚本，这些脚本将受益于 iOS 中的改进，所以如果我能理解解决它的方法、为什么会发生、发生了什么，那么我可以对每个脚本应用单独的修复脚本。

谢谢。

Answer 1

问题不在于 iOS 在滚动时忽略了 javascript(更准确地说，在滚动动量处于事件状态时)。问题是，虽然发生了这种情况，但 iOS 并没有真正记录元素在屏幕上的位置变化。事实上，如果您有一个附加到 scroll 事件的处理程序，它将在您停止触摸屏幕时停止触发，然后在滚动停止时仅触发一次。

后果？你认为你正在触摸一个链接，但你没有。屏幕上的图像已经向上或向下移动，但是对于浏览器来说，一切都在同一个位置，所以，实际上，你没有触摸任何东西(或者触摸不同的东西)。当我发现这种行为时，我感到非常恼火，因为在我的例子中，我的页面充满了链接到画廊的图像......如果你在滚动时触摸它们，画廊打开时显示的不是你触摸的图像，而是另一个(当你的手指停止触摸屏幕时，它确实在那个位置)。

有解决办法吗？我所知道的唯一方法是禁用滚动动量，但你会失去滚动性能。