クロスブラウザスクロール

現在まで、スクロールの効果は非常に多くの人気を得ています（いわゆる視差 ）。 しかし、残念ながら、これらの効果はモバイルデバイスでネイティブにサポートされていません。 少し前まで、Mark Dalgleishはこの問題に対する彼自身の解決策を提案しました。

図書館

タッチライブラリのいずれかを選択します。
iScroll by Matteo Spinelli
ジョー・ヒューイットによるスクロール可能性
ZyngaによるZynga Scroller

Modernizrを接続します

ラッパー

iScrollで選択した場合は、＃wrapperブロックと#scrollerブロック内にコンテンツを配置する必要があります

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

Modernizrを使用してタッチデバイスを定義し、そのデバイス用の新しいiScrollインスタンスを作成します

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

スタイルを追加する

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

スクロール位置を正規化する関数

 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}; } 

最後のタッチ

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

アニメーションにrequestAnimationFrameを使用する理由