iOS7中视差站点使用skrollr、skrollr菜单的问题

Question

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

//Init Skrollr

$(Document).ready(函数(){ 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/

谢谢！！

Answer 1

在移动平台上，使用CSS转换移动skrollr-body元素，这将打破固定的定位元素。请阅读文档的这一部分，我刚刚用第二段对其进行了扩展。

从skrollr 0.6.0开始，您只需要做一件事:在页面中包含一个元素和id skrollr body。这就是我们为了假滚动而移动的元素。唯一的情况是，你不需要一个#斯克罗尔-身体时，使用位置:固定的外露。事实上，skrollr网站没有包含#skrollr body元素。如果您同时需要固定元素和非固定元素(即静态元素)，那么将静态元素放在#skrollr body元素中。 或者换个说法:在移动平台上，skrollr body元素是使用CSS转换来移动的。您不能有位置:固定的或背景-附件:固定的内部元素，使用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