如何禁用触控板滚动惯性？解决GSAP滚动吸附后惯性问题

你遇到的问题是触控板的惯性滚动会在ScrollTo完成吸附后继续触发滚动，导致跳转到下一个区块。可以通过以下两种方式解决：

方法一：使用GSAP ScrollTrigger原生snap配置（推荐） #

GSAP的ScrollTrigger内置了snap功能，专门用于滚动吸附，能自动处理触控板惯性这类边缘情况，比手动用onEnter+ScrollTo更稳定。

修改你的JS代码如下：

gsap.registerPlugin(ScrollTrigger);

// 为所有section设置滚动吸附
ScrollTrigger.create({
  trigger: "body",
  start: "top top",
  end: "bottom bottom",
  snap: {
    snapTo: "section", // 吸附到每个section的顶部
    duration: 0.5,
    ease: "power1",
    // 自定义吸附触发阈值，匹配你之前的75%逻辑
    inertia: false, // 禁用惯性滚动对吸附的干扰
    onSnapComplete: () => {
      // 可选：吸附完成后的回调
    }
  }
});

方法二：手动拦截滚动惯性（适配原有逻辑） #

如果你想保留自己的onEnter触发逻辑，可以在ScrollTo动画期间锁定滚动，阻止惯性滚动的影响：

修改你的JS代码：

gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

let isScrolling = false;

// 阻止惯性滚动的事件监听
function blockScroll(e) {
  if (isScrolling) {
    e.preventDefault();
  }
}
window.addEventListener('wheel', blockScroll, { passive: false });
window.addEventListener('touchmove', blockScroll, { passive: false });

ScrollTrigger.create({
  trigger: ".hero-section",
  markers: true,
  start: "75% top",
  end: "bottom bottom",
  onEnter: () => {
    if (isScrolling) return;
    isScrolling = true;
    gsap.to(window, {
      duration: 0.5,
      ease: "power1",
      scrollTo: {
        y: "#scrollTarget",
        autoKill: false
      },
      onComplete: () => {
        isScrolling = false;
      }
    });
  }
});

补充说明： #

• 方法一利用GSAP原生的snap配置，inertia: false会直接禁用惯性滚动对吸附的干扰，同时自动处理触发阈值和动画过渡。
• 方法二通过标记isScrolling状态，在动画期间阻止wheel和touchmove事件，避免惯性滚动继续触发滚动行为，动画完成后恢复滚动。
• 注意你的原代码中GSAP版本不一致（ScrollTrigger用3.11.0，核心库用3.12.5），建议统一版本，避免潜在兼容性问题。

内容的提问来源于stack exchange，提问作者work space