安卓浏览器上的滚动事件未触发.需要解决方法

Scroll event on Android Browser not firing. Need workaround

本文关键字：方法 解决 事件 浏览器 滚动      更新时间：2023-09-26

我创建了一个带有视差街景的网站。有关存档版本，请参阅此处。

它在所有主要的桌面浏览器和Safari Mobile上运行良好。它在Mobile Firefox和Chrome for Android Beta中也能正常工作。但是，默认的 Android 浏览器存在滚动事件问题。让我说清楚。滚动不是问题。div 根据需要滚动。滚动事件不会触发。这个问题我在Honeycomb和ICS上遇到过。

我不关心其他移动浏览器，因为对于移动屏幕尺寸，通常看不到视差场景;mediaquery和条件JavaScript加载会照顾到这一点。响应式设计和所有爵士乐。

基本上，我编写了一个parallise（） jQuery插件，它根据每个图像的位置和"深度"来定位每个图像。此函数绑定到滚动事件。

在 Android 浏览器上，此事件仅在下一次触摸开始时触发，而不是连续触发。

好的，所以我想也许如果我将函数绑定到touchstart、touchmove和touchend事件，我会解决我的问题。没有雪茄。其他触摸事件也被窃听。应用建议的解决方法会导致事件触发，但正如我必须e.preventDefault()的那样，滚动（练习的全部要点）被禁用。

如果我只是轮询舞台div 相对于窗口div 的位置怎么办？事实证明，位置信息仅在下一次触摸开始时更新。

我正处于束缚的尽头。任何帮助将不胜感激。

即使触摸事件在有缺陷的 Android 版本上正常工作，并且您随后能够在拖动期间有效地跟踪本机滚动位置，这也很容易出错。例如，它不会考虑触摸完成后发生的动量动画。

iOS和Android做出了牺牲，以提高滚动性能。在这两个平台上，在滚动完成之前，无法获得准确的滚动位置。滚动事件（在<body>上）在动量动画完成之前不会触发。因此，虽然您最初的问题是关于溢出<div>上的滚动事件，但无论如何解决这个问题可能对您并不完全有帮助。

如果您希望动画随滚动及时更新，则需要以编程方式执行滚动，而不是使用浏览器的本机滚动。最好的库是iScroll。您可以非常轻松地实现视差效果，如本演示所示。

如果您需要更复杂的效果（在您的示例中为行走字符），您可以选择 iScroll 的"探针"版本，它允许对滚动位置进行像素完美的轮询，以换取性能降低。

但是，使用 iScroll 有很多缺点：

  • 您可能需要更改标记和样式
  • 对于桌面浏览器来说，这是不必要的开销，但由于标记更改可能很难仅用作后备
  • 滚动不会感觉完美 - 在iOS上，通常具有出色的滚动性能 - 动量计算的微小差异可能会让人感到不和谐。在Android上，滚动可能会变得比平时更滞后。

滑动不需要 prevent的垫片在触摸启动时默认：https://github.com/TNT-RoX/android-swipe-shim

相关文章：