如何在移动设备上修复 Skrollr？

Question

我遵循了移动浏览器支持指南，将内容包装在 body 标记之前和之后。

解释在这里：https://github.com/Prinzhorn/skrollr#what-you-need-in-order-to-support-mobile-browsers

但是，该网站仍然不允许页面在 iPad 上滚动。我不确定为什么。任何代码侦查将不胜感激。

带有代码的站点是http://bit.ly/1rr6zGA

Answer 1

您需要将所有内容包装在 ID 为 skrollr-body 的元素中。所有不是位置的元素：固定；在你的 css 中进入 skrollr-body 元素。

From Skrollr website:

从 skrollr 0.6.0 开始，您只需要做一件事：在您的页面上添加一个 ID 为 skrollr-body 的元素。这就是我们为了伪造滚动而移动的元素。唯一不需要 #skrollr-body 的情况是使用 position:fixed 独占。事实上，skrollr 网站不包含#skrollr-body 元素。如果您需要固定和非固定（即静态）元素，请将静态元素放在#skrollr-body 元素中。

或者换一种说法：在移动设备上，skrollr-body 元素是使用 CSS 转换来移动的。根据 CSS 规范 (http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/)，您不能在使用 CSS 转换的元素内部放置 position:fixed 或 background-attachment:fixed。这就是为什么这些元素需要位于 skrollr-body 元素之外的原因。

Answer 2

我可以确认您需要将要滚动的内容包装在#skrollr-body 中。仅仅添加一个 id=skrollr-body 的 div 是行不通的。 我的页面不会在移动设备上滚动。