0

我正在使用 skrollr.js 和 skrollr-menu 来创建视差网站。我有 3 个带有嵌套元素的 div，我想以不同的速度进行视差。在桌面上一切正常，但在运行 iOS 7 的 iPad 上，我遇到了元素定位方式和滚动速度的问题。3个不同的div有一个位置类：固定，嵌套元素有一个位置类：绝对；并使用 top:px 定位在 Y 轴上（尝试使用 % 而不是混合结果）。其他（非嵌套，即#content）div似乎在所有浏览器和设备上都可以一致地工作。我真的很感谢这个问题的任何帮助，它已经让我发疯了好几天，这是我第一个使用 skrollr 的项目，所以我没有太多经验，但到目前为止，我很喜欢它，除了 iOS 上的这个小故障，我已经检查了 stackOverflow 中的文档和相关问题，但仍然没有运气！希望有人能够为我指出正确的方向，这是我如何尝试实现这一点的一个小技巧，尽管要在 iOS 中看到它，我很快就必须提供指向该项目的直接链接，请多多包涵，因为我有移植现有项目以在移动设备上将其与 skrollr 一起使用，因此我想在提交之前尽可能多地清理代码以避免混淆，同时这里是小提琴：

//Init Skrollr

$(document).ready(function(){ var s = skrollr.init({ forceHeight: false, smoothScrolling: true, smoothScrollingDuration: 150 });

    skrollr.menu.init(s, {
        easing: 'outCubic',
        animate: true,
        duration: 1000

}); });

http://jsfiddle.net/shinobisan/EvPdL/6/

谢谢！！

4

1 回答 1

1

在移动设备上，skrollr-body使用 CSS 变换移动元素，这将破坏固定定位的元素。请阅读文档的这一部分，我刚刚扩展了第二段。

从 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/）。这就是为什么这些元素需要位于 skrollr-body 元素之外的原因。

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

于 2014-03-21T07:17:14.903 回答