Crossbauser scrolling

To date, the effects of scrolling gained quite a lot of popularity (the so-called parallax ). But, unfortunately, these effects are not supported by mobile devices. Not so long ago, Mark Dalgleish offered his own solution to this problem:

Libraries

Choose one of the touch libraries:
iScroll by Matteo Spinelli
Scrollability by Joe Hewitt
Zynga Scroller by Zynga
')
And connect Modernizr

Wrapper

If your choice fell on iScroll, you should put the content inside the #wrapper and #scroller blocks

<div id="wrapper"> <div id="scroller"> <ul> <li>...</li> </ul> </div> </div> 

Define a touch device using Modernizr and create a new instance of iScroll for it.

 var myScroller = Modernizr.touch ? new iScroll('scroller') : null; 

Add styles

 #wrapper { overflow: auto; } /*  #wrapper  - */ /*  head.touch  Modernizer'       - */ .touch #wrapper { overflow: hidden; } 

Function to normalize scroll position

 function getScroll(elem, iscroll) { var x, y; if (Modernizr.touch && iscroll) { x = iscroll.x * -1; y = iscroll.y * -1; } else { x = elem.scrollLeft; y = elem.scrollTop; } return {x: x, y: y}; } 

Final touch

 var myScroller = Modernizr.touch ? new iScroll('scroller') : null; (function animationLoop(){ window.requestAnimationFrame(animationLoop); var scroll = getScroll(window, myScroller); //       scroll.x; scroll.y; })(); 

Why for animation you should use requestAnimationFrame