Question

我正在使用skrollr.js和skrollr-menu创建一个视差网站。我有3个div与嵌套元素，我想以不同的速度视差。一切都在桌面上按预期工作，但在运行iOS 7的iPad上我遇到了元素定位方式和滚动速度的问题。 3个不同的div有一个位置类：fixed，嵌套元素是一个位置类：absolute;并使用top：px定位在Y轴上（尝试使用％而不是混合结果）。其他（非嵌套，即#content）div似乎在所有浏览器和设备上都能保持一致。我真的很感激任何帮助这个问题它已经让我疯狂了几天，这是我的第一个项目使用skrollr所以我没有太多的经验，但到目前为止我很喜欢它除了iOS上的这个小故障，我已经检查了stackOverflow中的文档和相关问题，但仍然没有运气！希望有人能够指出我正确的方向，这里是我试图实现这一目标的一个小提琴，虽然在iOS中看到它我将不得不提供一个项目的直接链接，请我忍受，因为我有移植现有项目以便在移动设备上使用skrollr，所以我想在提交之前尽可能地清理代码以避免混淆，同时这里是小提琴：

//Init Skrollr

（文档）$。就绪（函数（）{ 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-body就是在使用position时：固定异常。事实上，skrollr网站并没有包含#skrollr-body元素。如果您需要固定和非固定（即静态）元素，请将静态元素放在#skrollr-body元素中。

或者换句话说：在移动设备上，使用CSS转换移动skrollr-body元素。您不能拥有位置：固定或背景附件：根据CSS规范（http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/）修复使用CSS变换的内部元素。这就是为什么这些元素需要在skrollr-body元素之外的原因。

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

在iOS7中使用skrollr，skrollr-menu的视差站点问题

1 个答案: