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

現在まで、スクロールの効果は非常に多くの人気を得ています（いわゆる視差 ）。 しかし、残念ながら、これらの効果はモバイルデバイスでネイティブにサポートされていません。 少し前まで、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を使用する理由