ipad - 为什么 skrollr 阻止在 ipad 上滚动？

Question

我正在尝试使用 skrollr 创建一个简单的视差动画:我的网站在 Chrome/Mac 上运行良好，但我在 ipad 上看到异常行为..

在 ipad 上(在 IOS 模拟器上测试)，

页面的主体根本不滚动(或者可能在背景中滚动，在动画 div 下方？)

动画背景位置(折纸图案)在 data-start 中定义的范围内沿相反方向(向下向上)滚动/data-top-bottom

在桌面上，如果我破解 div#hero，我可以模拟效果成为 position: fixed;在 chrome 开发工具中。

skrollr examples在 IOS 模拟器中按预期工作。

我有 <div id="skrollr-body"></div>就在收盘前</body>标签

有什么建议么？

Answer 1

你只是天真地添加了一个空的#skrollr-body元素。文件说

Starting with skrollr 0.6.0 there's just one thing you need to do: Include an element on your page with the id skrollr-body. That's the element we move in order to fake scrolling.

如果这是我们为假滚动而移动的元素，那么您的所有元素都需要在其中(除非它们是固定位置的)。

The only case were you don't need a #skrollr-body is when using position:fixed exlusively. In fact the skrollr website doesn't include a #skrollr-body element. If you need both fixed and non-fixed (i.e. static) elements, put the static ones inside the #skrollr-body element.

https://github.com/Prinzhorn/skrollr#what-you-need-in-order-to-support-mobile-browsers