Question

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

if ( direction == 'down' ) {

if(caseIndex < numOfSections) {
    caseIndex++;    

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

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

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

我对ScrollBottom1的功能；

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

我的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;

});

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

Answer 1

我找到了解决方案。

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

触摸支持滚动动画

1 个答案: