5

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

它适用于所有主要的桌面浏览器和 Safari Mobile。它也适用于 Mobile Firefox 和 Chrome for Android Beta。但是，默认的 Android 浏览器在滚动事件方面存在问题。让我说清楚。滚动不是问题。div 根据需要滚动。滚动事件不会触发。我在 Honeycomb 和 ICS 上遇到的这个问题。

我不关心其他移动浏览器，因为对于移动屏幕尺寸，通常看不到视差场景；媒体查询和条件 JavaScript 加载会处理这个问题。响应式设计和所有爵士乐。

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

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

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

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

我已经走到了尽头。任何帮助将非常感激。

4

2 回答 2

1

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

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

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

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

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

  • 您可能需要更改标记和样式
  • 对于桌面浏览器来说这是不必要的开销，但由于标记更改可能难以仅用作后备
  • 滚动不会感觉完美——在 iOS 上，滚动性能通常很出色——动量计算的细微差别会让人感到不和谐。在 Android 上，滚动可能会变得比平时更迟钝。
于 2014-02-07T10:42:48.250 回答
0

在 touchstart 上滑动不需要 preventdefault 的垫片：https ://github.com/TNT-RoX/android-swipe-shim

于 2014-08-06T09:49:39.263 回答