Javascript 触摸屏支持滚动动画

我的代码有一些问题。我正在使用GSAP来滚动页面的整个高度。一切都很好，桌面上使用滚动，但在手机上我不能刷卡。。因为为了滚动，我使用了以下代码：

if ( direction == 'down' ) {

if(caseIndex < numOfSections) {
    caseIndex++;    

if(caseIndex == 1){
    scrollBottom1(caseIndex);       
}

if(caseIndex == 2){ 
    scrollBottom2(caseIndex);
}

if(caseIndex == 3){
    scrollBottom3(caseIndex);
}
  }   
}

我的TimeLineMax动画：

  var tl1 = new TimelineMax({pasused: true});
      tl1.to(slide1,0,{display:"block"})
      .to(".hide-text", 1, {y:"100%",ease:Power3.easeIn},"slide1" )
      .to(".slogan", 0.5, {delay:"0.5",y:"-100%"},0 )
      .to(slide0,1.5,{delay:"0.3",y:"-100vh",ease:Power3.easeInOut}, 0)
      .to(slide1,1.5,{delay:"0.3",y:"0vh", ease:Power3.easeInOut }, 0)
      .to(toggleNavi,0,{backgroundColor:"#fff"})
      .to(slide0,0,{display:"none", y:"0"})
      .to(slide1,0,{y:"0",})      
       tl1.paused(true);

我不能像以下那样使用事件侦听器：

window.addEventListener("mousemove", scrollBottom1);
window.addEventListener("touchstart", scrollBottom1);
window.addEventListener("touchmove", scrollBottom1);

因为它只为第一张幻灯片工作

我有一些解决问题的灵感：

var lastY;

$(document).bind('touchmove', function(e) {

    var currentY = e.originalEvent.touches ? e.originalEvent.touches[0].pageY : e.pageY;

    if (Math.abs(currentY-lastY) < 10) { return; }

    if (currentY > lastY) {

        alert('down');

    } else {

        alert('up');
    }

    lastY = currentY;

});

var整形术；
$（文档）.bind（'touchmove'，函数（e）{
var currentY=e.originalEvent.touchs？e.originalEvent.touchs[0]。pageY:e.pageY；
if（Math.abs（currentylasty）<10{return；}
如果（当前>上次）{
警惕（“下降”）；
}否则{
警惕（“向上”）；
}
lastY=当前；
});

---

但我不知道这是好是坏。。有人能帮我吗？谢谢

我找到了解决办法

var ts;
$('.case_0').bind('touchstart', function (e){
   ts = e.originalEvent.touches[0].clientY;
});

$('.case_0').bind('touchend', function (e){


    if (tl1 && tl1.isActive()) {
        return;
    }

    if (tl2 && tl2.isActive()) {
        return;
    }

    if (tl3 && tl3.isActive()) {
        return;
    }


   var te = e.originalEvent.changedTouches[0].clientY;
   if(ts > te+5){
    tl1.play();
   }else if(ts < te-5){
    tl1.reverse();
   }
});

var-ts；
$（'.case_0'）.bind（'touchstart'，函数（e）{
ts=e.originalEvent.touchs[0].clientY；
});
$（'.case_0'）.bind（'touchend'，函数（e）{
if（tl1&&tl1.isActive（））{
返回；
}
if（tl2&&tl2.isActive（））{
返回；
}
if（tl3&&tl3.isActive（））{
返回；
}
var te=e.originalEvent.changedTouches[0]。客户端；
如果（ts>te+5）{
tl1.play（）；
}否则如果（ts

嘿，西蒙。请在问题中包含足够的代码来重新创建错误，包括任何相关的HTML和CSS。JSFIDLE、CodePen或堆栈代码段会很有帮助。我找到了解决方案。它工作得很好。谢谢

var ts;
$('.case_0').bind('touchstart', function (e){
   ts = e.originalEvent.touches[0].clientY;
});

$('.case_0').bind('touchend', function (e){


    if (tl1 && tl1.isActive()) {
        return;
    }

    if (tl2 && tl2.isActive()) {
        return;
    }

    if (tl3 && tl3.isActive()) {
        return;
    }


   var te = e.originalEvent.changedTouches[0].clientY;
   if(ts > te+5){
    tl1.play();
   }else if(ts < te-5){
    tl1.reverse();
   }
});