13

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

在 ipad 上（在 IOS 模拟器上测试），

  • 页面的主体根本不滚动（或者可能在背景中滚动，在动画 div 下方？）
  • data-start动画背景位置（折纸图案）在/中定义的范围内沿相反方向（向下是向上）滚动data-top-bottom

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

  • skrollr示例在 IOS 模拟器中按预期工作。
  • 我<div id="skrollr-body"></div>在结束</body>标签之前

有什么建议么？

4

3 回答 3

17

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

从 skrollr 0.6.0 开始，您只需要做一件事：在您的页面上包含一个 ID 为 skrollr-body 的元素。这就是我们为了伪造滚动而移动的元素。

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

唯一不需要 #skrollr-body 的情况是在使用 position:fixed 时。事实上，skrollr 网站不包含#skrollr-body 元素。如果您需要固定和非固定（即静态）元素，请将静态元素放在#skrollr-body 元素中。

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

于 2013-11-12T08:32:27.497 回答
11

因此，换句话说，只需<div id="skrollr-body">在开始标签之后添加一个标签，并通过在标签之前<body>添加一个来关闭此分区。</div></body>

于 2014-04-02T18:59:14.887 回答
0

添加带有 skrollr-body id 的 div 包装器绝对没有任何作用，滚动在移动设备上不起作用

于 2017-07-07T20:47:51.193 回答