ios - Keith Clark 的 CSS Parallax Inertial/Momentum Scrolling on Mobile

Question

所以我用 Keith Clark's pure CSS parallax 建立了一个网站主意。它看起来不错，但我很好奇是否有人想出如何在 iOS 上允许惯性/动量滚动。

Here is my site so far.

目前我所知道的:

目前惯性/动量滚动不起作用，因为基本上整个页面都保存在一个带有 overflow-y:auto 的容器中。因此，当您在页面上滚动时，您是在一个容器内滚动。在 iOS 上，您必须应用 -webkit-overflow-scrolling: touch 以允许非视口(viewport)滚动的任何内容具有惯性/动量滚动。

如果将 -webkit-overflow-scrolling: touch 添加到 .parallax 中，那么整个视差效果就会中断。 example of that here

我已经尝试将 iscroll.js 添加到页面，但它也会通过使 .parallax 容器中的子项以不正确的方式滚动来破坏页面。它使视差层相对于视口(viewport)而不是容器上下移动。

这导致的另一个问题虽然不是什么大问题，但最好在这里解决，因为它是相关的，因为在 iOS 上，页面永远不会进入 minimal-ui，因为这只会在视口(viewport)滚动时发生。

我看到有人在博客上问这个问题，所以我想我可以把同样的问题带到 stackoverflow 上，看看是否有人有什么好主意。

谢谢!

Answer 1

这不是您想听到的(假设您花了大量时间阅读了 Keith Clark 的指南)，但 iOS 处理滚动事件的方式与桌面不同。你可以调整你已经拥有的东西，但如果你真的想要这个，你最好切换到一个 js 工具，它有 iOS parallax + momentum 的文档支持。 Stellar 可以做到这一点，例如 - http://markdalgleish.com/projects/stellar.js/docs/