使用纯 javascript 在滚动端进行页面捕捉（适用于 Cordova 应用程序）

Question

I have developed a mobile app that has 3 pages. The pages are laid out in a horizontal line. The user navigates between pages by swiping left or right on the div that contains all 3 pages.

I have already written code that seems to work sometimes .

Please keep in mind that the HTML and CSS i have listed below is simplified for you to get a quicker understanding. The width of each AppPage and the AppPages_Container will be set dynamically via javascript when the app loads.

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

This is the first function that is called via an onscroll event

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

This is the second function that does the actual snapping (with a nested Animate() function)

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.

Is there an easier (more reliable) method for achieving page snapping without the use of a JavaScript Framework?? ...please help by giving suggestions or better solutions. Thanks.

Answer 1

Don't use the onscroll event, use the touchstart and touchmove events.

Touch events will provide you with an event that includes an array of touch coordinates, so you can use them to detect swipe.

Keep track of the current view, and change the current div according to the swipe.

So a simple implementation is:

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