純粋なjavascript（Cordova App用）を使用したスクロールエンドでのページのスクロール

Question

3ページのモバイルアプリを開発しました。 ページは水平線でレイアウトされています。ユーザーは、3ページすべてを含むdivを左右にスワイプしてページ間を移動します。

私はすでに動作しているようなコードを書いています。時にはです。

以下にリストされているHTMLとCSSは、わかりやすいように です。各 のAppPageとAppPages_Containerの幅は、アプリケーションの読み込み時にjavascriptを使用して動的に設定されます。

HTML

<div id="AppDisplayArea"> 
    <div id="AppPages_Container" onscroll="get_PagePosition()"> 
    <div class="AppPage">Page 1</div> 
    <div class="AppPage">Page 2</div> 
    <div class="AppPage">Page 3</div> 
    </div> 
</div> 

CSS

#AppDisplayArea{position:absolute; top:0; left:0; width:100%; height:100%; overflow-x:scroll;} 
#AppPages_Container{position:absolute; z-index:1; top:0px; bottom:0px; left:0; margin:0; width:2160px; height:100%;} 
.AppPage{position:relative; width:720px; height:100%; display:block; float:left;} 

JAVASCRIPT

これはonscroll前夜経由で呼び出される最初の関数でありますNT

function get_PagePosition() 
{ 
var Container = document.getElementById('AppPages_Container'); 
var scroll_position = Container.scrollLeft; 

var FIRST = 0; 
var SECOND = window.innerwidth; 
var THIRD = window.innerwidth*2; 

var Page1_Position = (Math.abs(FIRST - scroll_position)); 
var Page2_Position = (Math.abs(SECOND - scroll_position)); 
var Page3_Position = (Math.abs(THIRD - scroll_position)); 

var Nearest_Page = Math.min(Page1_Position, Page2_Position, Page3_Position); 

setTimeout(function(){ check_position(); },60); 


    function check_position() 
    { 
     if(Page1_Position==Nearest_Page){SnapPage('Pages_Container',0);} 
     if(Page2_Position==Nearest_Page)SnapPage('Pages_Container',1);} 
     if(Page3_Position==Nearest_Page)SnapPage('Pages_Container',2);} 
    } 

}// End get_PagePosition 

これは（ネストされたアニメーション（）関数を使用して）実際のスナップ

function SnapPage(_object,_position){ 

var LEFT = (window.innerWidth*_position);       
var Page = document.getElementById(_object); 
var Scroll_Speed = 10; 
var Scroll_Direction; 
var Count = (Math.abs(Page.scrollLeft - LEFT)); 
var ScrollTimer = setInterval(function(){ Animate(); }, 1); 

if(LEFT > Page.scrollLeft){Scroll_Direction=1;} 
if(LEFT < Page.scrollLeft){Scroll_Direction=-1;} 
if(LEFT == Page.scrollLeft){Scroll_Direction=0;} 

function Animate() 
{ 
    if(Count<=0){clearInterval(ScrollTimer); Page.scrollLeft=LEFT; return;} 
    Page.scrollLeft += (Scroll_Direction*Scroll_Speed); 
    Count-=Scroll_Speed; if(Count<0){Count=0;} 
} 


return false;    
}//End SnapPage. 

を行う第二の機能であることは使用せずに、ページのスナップを達成するためのより簡単に（より信頼性の高い）方法がありますのJavaScriptフレームワークの？ ...提案やより良い解決策を提供して助けてください。ありがとう。

Answer 1

onscrollイベントを使用しないでください。touchstartイベントとtouchmoveイベントを使用してください。

タッチイベントは、タッチ座標の配列を含むイベントを提供するため、スワイプを検出するために使用できます。

現在のビューを追跡し、スワイプに従って現在のdivを変更します。

だから、単純な実装は次のようになります。この素晴らしく、コンパクトなソリューションのための

var xStart; 
var currentScreen = 1; 

function onTouchStart(e) {           
    xStart = e.touches[0].clientX;          
};             

function onTouchMove(e) { 
    if (!xStart) return; 

    if (xStart - e.touches[0].clientX > 0) { 
     // Handle left swipe 
     currentScreen++; 
     if (currentScreen > 3) currentScreen = 1; 
    } else { 
     // Handle right swipe 
     currentScreen--; 
     if (currentScreen < 1) currentScreen = 3; 
    }      

    xStart = null; 
};