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?

Cœur
  • 37,241
  • 25
  • 195
  • 267
ptim
  • 14,902
  • 10
  • 83
  • 103
  • "I have
    just before the closing

    tag" **why?**

     – Prinzhorn Nov 12 '13 at 07:53
  • Hi @Prinzhorn! "Include an element on your page with the id skrollr-body." I didn't look at the example: http://prinzhorn.github.io/skrollr/examples/bg_constant_speed_less.html closely enough - I've wrapped the entire page in #skrollr-body and it works!! Tx! Care to make it an answer? – ptim Nov 12 '13 at 08:22

3 Answers3

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

Prinzhorn
  • 22,120
  • 7
  • 61
  • 65
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.

Remi
  • 4,663
  • 11
  • 49
  • 84
  • 1
    This didn't quite work for me. The result was that I was unable to scroll the full height of the page. – Jay Mar 13 '16 at 00:10
0

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

Nebular Dust
  • 403
  • 1
  • 6
  • 17