How to fix Skrollr on Mobile?

Question

I have followed the guidelines for mobile browser support by wrapping the content in a after and before the body tags.

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

The site still wont allow the page to scroll on an iPad however. I'm not sure why. Any code sleuthing would be much appreciated.

Site with code is http://bit.ly/1rr6zGA

Harriot

the page you've linked does not contain a skrollr-body element – Ocotillo

Answer 1

You need to wrapp all your content in a element with the ID of skrollr-body. All elements that is not position:fixed; in your css goes inside the skrollr-body element.

From Skrollr website:

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. The only case where you don't need a #skrollr-body is when using position:fixed exclusively. 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.

Or to put it differently: On mobile the skrollr-body element is moved using CSS transforms. You can't have position:fixed or background-attachment:fixed inside elements which use CSS transforms as per CSS spec (http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/). That's why those elements need to be outside of the skrollr-body element.

Southward

you say you need to "wrap" all your content in #skrollr-body. but on the site it says "Include an element on your page with the id skrollr-body" it doesn't say wrap. I would think to just put an empty #skrollr-bodydiv any where, but Ill try wrapping all my content in #skrollr-body because your way sounds more believable – Jueta

So any webpage with a fixed-nav cannot work on mobile with Skrollr. – Rigorism

@BenRacicot I'm not sure that is true. It is possible to have a fixed-nav as long as it is not wrapped by the #skrollr-body element. I've seen instances where the nav sits above the rest of the skrollring part – Magyar

Answer 2

I can confirm that you need to wrap the content you want to scroll in #skrollr-body. Just adding a div with id=skrollr-body won't work. My page wouldn't scroll otherwise on mobile.

Monterrey