JS:防止用户滚动的默认?或者强制 GSAP 在用户上方滚动

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

本文关键字：滚动 用户 GSAP 方滚动 或者 默认 JS      更新时间：2023-09-26

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

一切都在工作，但前提是我滚动一点点。 如果我滚动更多，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
});

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

最终，GSAP滚动到插件对此进行了设置：

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

它被称为自动杀伤，如果设置为 false，用户滚动不会中断补间。

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