iOS：滚动错误的元素

Question

我在www.cahri.com/tests/scroll 上显示的 iOS（7 或 8）上遇到了一个奇怪的滚动问题

如何重现？

1. 在 iPhone/iPad/iOS 模拟器上横向打开示例页面
2. 用右手拇指触摸主要内容（右侧）并向上或向下滚动
3. 松开右手拇指
4. 用左手拇指触摸左侧（这是一个带有溢出：滚动的 div）并尝试滚动：页面滚动而不是 div。松开左手拇指。
5. 可能需要多次尝试才能重现，如果页面不滚动，请返回 2。
6. 用左手拇指再次触摸左侧，现在它可以正确滚动了

您知道导致问题的原因吗？以及如何解决这个问题？

Answer 1

iOS 网络浏览器仍然会遇到固定定位元素（就像您的左侧 div）和滚动的问题。在我所做的许多 Web 项目中，这似乎总是会导致一些无法解释的问题/错误。我知道这不是一个确切的答案，但我只是在分享我以前曾走过这条路:)

最好的解决方案是使用一种摆脱移动设备固定定位和滚动的方法，或者使用第三方滚动库，例如：http://cubiq.org/iscroll-5

我在 iOS 设备上使用它们取得了很大的成功。

如果您想要一个不同的移动解决方案，您可以使用媒体查询来更改元素的定位。

@media screen and (max-width: 600px) {
  .column-left { ... }
}