How to fix Skrollr on Mobile?

skrollr
Dan Lee picture Dan Lee · Apr 30, 2014 · Viewed 16.7k times · Source

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

Answer

halliewuud picture halliewuud · May 9, 2014

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.

Related questions

Change Image on Scroll Position

I would like to change an image on a certain scroll position. For example: Scroll 100px show img1.jpg Scroll 200px show img2.jpg Scroll 300px show img3.jpg Here I found an example what I mean. Any ideas?

Read More
Skrollr init set <body> height to be too high

I used Skrollr library to create parallax effect for the background. However, when skillor.init() is called, the body height is too high and create extra space below in the page. The problem can be seen here: http://codepen.io/…

Read More
Angular2 Directive: How to detect DOM changes

I want to implement Skrollr as an Angular2 attribute directive. So, the format may be: <body my-skrollr> </body> However, in order to implement this, I need to be able to detect changes in the DOM in …

Read More