Go mobile!

Please note, this is a very recent addition to superscrollorama.
It is not fully tested accross all browsers and has its limitations. But it's a start.

If we want to get superscrollorama working on touch devices we have to face several difficulties.

The biggest problem with mobile superscrollorama applications is that the “onScroll” event on touch devices is interpreted quite differently: It is only triggered once the smooth scrolling animation is finished.
Add the fact that all intervals seem to be paused during scroll and we face quite a challenge.

Luckily other people have come across these problems as well and there are now several mobile scrolling frameworks. Noteworthy are: iScroll, Scrollability and Zynga Scroller. Basically how they all work is they make a wrapper around the content, and put that into another (outer) wrapper. The outer wrapper is resized to the viewport and the inner wrapper is then moved, when the user swipes. This way they all try to mimic the native scroll functionality but have more control over it.

Now because the body itself is not moving anymore we need to tell superscrollorama the offset of the inner content div within its viewport parent. This is achieved using the function “setScrollContainerOffset”. For documentation see the main documentation file.

Now we got the proper position, but one last problem remains: All the libraries still have no “onScroll” event. So why use them then you ask? Well they enable us to use a nice tweak well explained by Mark Dalgleish:
The requestAnimationFrame method.
This in turn isn’t supported by all browsers, but not to worry: There’s a polyfill to ensure compatibility.

In this example we also use Modernizr to target mobile users and then initialize iScroll explicitly for them. Then we use the requestAnimationFrame loop to update the position of the scrollcontainer.
This all may sound like a lot of hoops to jump through but that’s the price you'll have to pay if you want to brag about your site being mobile friendly…

So to wrap up – here’s how to achieve mobile compatibility:

• get a mobile scroll framework and get it to work with your dom
• get modernizr and wrap your scoller initiation into a “if (Modernizr.touch)” clause to target mobile users only
• include the requestAnimationFrame polyfill
• use requestAnimationFrame to continually update the scrollcontainer’s position inside the viewport
• enjoy

Issues:

Sadly even this solution has it’s limitations. The biggest setback concerns only pinned elements and exists due to a bug in webkit. The problem is that fixed elements inside wrappers that are positioned using -webkit-transform are positioned in relation to their parent instead of the body (as one might expect). The scroll libraries use -webkit-transform to move the scrollwrapper inside the viewport. They do this for the significant performance increase this offers in comparison to changing the top (or left) position.

To get our project to work for pinned elements we sadly have no other choice than to tell the scroll framework to avoid using -webkit-transform. In iScroll4 this is done using the option “useTransform: false”. Additionally we’ll have to add an eventlistener that updates superscrollorama on touchmove, as requestAnimationFrame is otherwise not triggered during touch.

So this will make pinned elements work but at the cost of performance. If you have only a small application like this example this might still work for you.

If you don’t need pinned elements you should be fine! Set “useTransform: true” in iScroll and ignore the touchmove eventlistener from the example sourcecode.