Login/Register
Why is skrollr preventing scrolling on ipad?
Asked Answered
Solved ipadparallaxskrollr
C

3

13

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..

On ipad (testing on the IOS simulator),

  • 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

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

  • The skrollr examples work as expected in the IOS simulator.
  • I have <div id="skrollr-body"></div> just before the closing </body> tag

Any suggestions?

Cerumen answered 12/11, 2013 at 7:47 Comment(2)
"I have <div id="skrollr-body"></div> just before the closing </body> tag" why? – Person
Hi @Prinzhorn! "Include an element on your page with the id skrollr-body." I didn't look at the example: prinzhorn.github.io/skrollr/examples/… closely enough - I've wrapped the entire page in #skrollr-body and it works!! Tx! Care to make it an answer? – Cerumen
P
17

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

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).

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-you-need-in-order-to-support-mobile-browsers

Person answered 12/11, 2013 at 8:32 Comment(1)
fair call, thanks - late night and crossed wires; case closed. – Cerumen
M
11

So in other words, simply add a <div id="skrollr-body"> tag right after the opening <body> tag, and close this division by adding a </div> right before the </body> tag.

Menken answered 2/4, 2014 at 18:59 Comment(1)
This didn't quite work for me. The result was that I was unable to scroll the full height of the page. – Breathy
L
0

adding a div wrapper with skrollr-body id did absolutely nothing for, scroll just doesn't work on mobile

Linnealinnean answered 7/7, 2017 at 20:47 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.