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

我开发了一个有3个页面的移动应用程序。 这些页面是水平排列的。用户通过在包含所有3个页面的div上向左或向右滑动来在页面之间导航

我已经编写了一些代码，有时似乎可以工作

请记住，我下面列出的HTML和CSS是 简化，便于您更快地理解。每一个的宽度 应用程序加载时，AppPage和AppPages_容器将通过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>

JAVASCRIPT

这是通过onscroll事件调用的第一个函数

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

这是执行实际捕捉的第二个函数（使用嵌套的Animate（）函数）

函数快照页（_对象，_位置）{
var LEFT=（window.innerWidth*_位置）；
var Page=document.getElementById（_对象）；
var Scroll_速度=10；
var-u方向；
var Count=（Math.abs（Page.scrollLeft-LEFT））；
var ScrollTimer=setInterval（函数（）{Animate（）；}，1）；
如果（LEFT>Page.scrollLeft）{Scroll\u Direction=1；}
if（LEFT如果（Count不使用
onscroll
事件，请使用
touchstart
和
touchsmove
事件

触摸事件将为您提供一个包含触摸坐标数组的事件，因此您可以使用它们来检测刷卡

跟踪当前视图，并根据滑动更改当前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;
};

var-xStart；
var currentScreen=1；
函数onTouchStart（e）{
xStart=e.touchs[0].clientX；
};                                                
移动功能（e）{
如果（！xStart）返回；
if（xStart-e.touchs[0].clientX>0）{
//左击手柄
currentScreen++；
如果（currentScreen>3）currentScreen=1；
}否则{
//右击手柄
当前屏幕--；
如果（currentScreen<1）currentScreen=3；
}                       
xStart=null；
};
感谢这一小巧的解决方案。我在早期版本的代码中使用了触摸事件，它们在交换页面方面效果很好……但在实时反馈方面效果不佳（用户用手指看到页面移动）。例如：YouTube应用程序有4个选项卡（页面）可以通过向左或向右滑动来访问。如果在第1页上进行了非常小的滑动，则第1页将滑回中间框架。但如果进行了较大的滑动，则应用程序将过渡到另一页。我将合并您的触摸解决方案并运行一些测试，一旦我使其与实时fe配合良好edback我会回来接受你的解决方案作为我问题的主要答案。与此同时，我一定会投票支持你清晰易懂的解决方案。谢谢。谢谢你的投票支持。就像我写的，这是一个简单的实现，所以关于你用YouTube应用程序描述的内容，你可以通过这些事件来实现，只需要更多的逻辑在事件处理中，例如：1）计算移动的加速度，以决定您是要更改屏幕上div的位置，还是更改屏幕2）使用每个移动事件之间的差异来更改div的位置……这些事件可以用于所有这些，这更符合逻辑。
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.

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