Ios 基思·克拉克';移动设备上的CSS视差惯性/动量滚动

Ios 基思·克拉克';移动设备上的CSS视差惯性/动量滚动,ios,css,touch,overflow,parallax,Ios,Css,Touch,Overflow,Parallax,所以我用idea建立了一个网站。它看起来不错,但我很好奇是否有人想出了在iOS上允许惯性/动量滚动的方法 到目前为止我所知道的: 目前惯性/动量滚动不起作用,因为基本上整个页面都保存在带有overflow-y:auto的容器中。因此,当您在页面上滚动时,您是在容器中滚动。 在iOS上,您必须应用-webkit overflow scrolling:touch,以允许非视口的任何滚动都具有惯性/动量滚动 如果将-webkit溢出滚动:触按.parallax,则整个视差效果将中断。 我尝试将is

所以我用idea建立了一个网站。它看起来不错,但我很好奇是否有人想出了在iOS上允许惯性/动量滚动的方法

到目前为止我所知道的:

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

如果将
-webkit溢出滚动:触按
.parallax
,则整个视差效果将中断。

我尝试将iscroll.js添加到页面中,但它也会使
.parallax
容器中的子对象以不正确的方式滚动,从而破坏页面。它使视差层相对于视口而不是容器上下移动

这导致的另一个问题虽然不是什么大问题,但最好在这里解决,因为它是相关的,因为在iOS上,页面永远不会进入最小的ui,因为只有在视口滚动时才会出现这种情况

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


谢谢

不是你想听到的(假设你花了几个小时阅读基思·克拉克的指南),但iOS处理滚动事件的方式与桌面不同。你可以调整你已经拥有的东西,但如果你真的想这样做,你最好切换到支持iOS视差+动量的js工具。例如,Stellar可以做到这一点-

这有帮助吗?可能有关系。顺便说一下,我喜欢这个设计。大量使用材料和颜色。另外,我知道固定滚动在移动设备上很费力,我很好奇这是否有效,或者是否有解决方法。你找到解决问题的方法了吗?我也会感兴趣的。