触摸支持滚动动画

Question

我的代码有问题。我正在使用GSAP滚动页面的整个高度。在桌面上使用滚动条时一切正常，但在移动设备上我无法刷卡..因为滚动，我使用了该代码：

if ( direction == 'down' ) {

if(caseIndex < numOfSections) {
    caseIndex++;    

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

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

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

[C0的我的功能；

ScrollBottom1

我的T​​imeLineMax动画：

   const scrollBottom1 = (caseIndex) =>{
        tl1.play();
    }

我无法使用事件监听器，例如：

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

但是我不知道这是好是坏。.有人可以帮我吗？谢谢！

Answer 1

我找到了解决方案。

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;

});