为什么skrollr阻止在ipad上滚动? [英] Why is skrollr preventing scrolling on ipad?

查看:164
本文介绍了为什么skrollr阻止在ipad上滚动?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I'm trying to create a simple parallax animation with skrollr: my site is working well on Chrome/Mac but I'm seeing unusual behaviour on the ipad..

在ipad上(在IOS模拟器上测试),

On ipad (testing on the IOS simulator),


  • 页面的主体根本没有滚动(或者可以在动画div下面的背景中滚动?)

  • 动画背景位置(折纸图案)在 data-start / 数据顶部 - 底部定义的范围内向相反方向滚动(向下)

  • the main body of the page doesn't skroll at all (or may scroll in the background, underneath the animated div?)
  • the animated background position (origami pattern) scrolls in the opposite direction (down is up) within the bounds defined in data-start / data-top-bottom

在桌面上,如果我破解,我可以模拟效果的效果div#hero 在chrome dev工具中 position:fixed;

On desktop, the effect I can simulate the effect if I hack the div#hero to be position: fixed; in chrome dev tools.


  • skrollr示例在IOS模拟器中按预期工作。

  • 我在结束< / body>之前< div id =skrollr-body>< / div> / code> tag
  • The skrollr examples work as expected in the IOS simulator.
  • I have <div id="skrollr-body"></div> just before the closing </body> tag

有什么建议吗?

推荐答案

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

You just naively added an empty #skrollr-body element. The documentation says


从skrollr 0.6.0开始,您只需要做一件事:在页面上包含id skrollr的元素-身体。这是我们为了假滚动而移动的元素。

Starting with skrollr 0.6.0 there's just one thing you need to do: Include an element on your page with the id skrollr-body. That's the element we move in order to fake scrolling.

如果这是我们为虚假滚动而移动的元素,那么所有元素都需要在它内部(除非它们是固定的)。

If that's the element we move for fake scrolling, then all your elements need to be inside of it (unless they're fixed positioned).


唯一的例子是你不需要#skrollr-body是使用位置时:固定不动。事实上,skrollr网站不包含#skrollr-body元素。如果您需要固定和非固定(即静态)元素,请将静态元素放在#skrollr-body元素中。

The only case were you don't need a #skrollr-body is when using position:fixed exlusively. In fact the skrollr website doesn't include a #skrollr-body element. If you need both fixed and non-fixed (i.e. static) elements, put the static ones inside the #skrollr-body element.

https://github.com/Prinzhorn/skrollr#what-您需要按顺序支持移动浏览器

这篇关于为什么skrollr阻止在ipad上滚动?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆