JS：防止用户滚动的默认值？或者强制 GSAP 滚动用户？

Question

我正在制作幻灯片区域。我想让它水平滚动会触发一个动画，将可滚动区域移动到下一个 "slide."

一切正常，但前提是我滚动一点点。如果我滚动更多，GSAP 滚动动画会自动失败。

我能想到有两种方法可以解决这个问题：

1 > 第一个是取消滚动行为，如下所示：

$viewing_area.scroll( function(event) {
   if(animationIsInProgress) {
       event.preventDefault();
   }
}

但是这种方式也可能会停止 GSAP 滚动。无法区分滚动是由于 GSAP 还是我认识的用户造成的。

2 > 第二种方法是让 GSAP 强制滚动用户正在做的任何事情：

TweenLite.to($viewing_area, time, { 
    scrollTo: { x: slide_stops[nextTarget] }, 
    ease: Power4.easeInOut,
    onComplete: function() {
        console.log('scrolling completed');
        animationIsInProgress = false;
    }
    //Some option for forcing the behavior over user scrolling
});

这些事情是可以实现的，还是滚动的本质是不可阻挡的？

Answer 1

它结束了，GSAP 滚动到插件对此有一个设置：

http://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/

称为autokill，如果设置为false，用户滚动不会中断tween。

TweenLite.to(myDiv, 2, {scrollTo:{y:400, autoKill:false}, ease:Power2.easeOut});

JS：防止用户滚动的默认值？或者强制 GSAP 滚动用户？

JS: preventDefault for User Scrolling? Or force GSAP scrolling over user?

javascript

jquery

gsap