Mac设备Kinetic/Inertia滚动下FullPageScrollPureJS多触发问题求助

我之前也踩过FullPageScrollPureJS在Mac惯性滚动下的这个坑，太影响体验了！核心问题就是Mac的Magic Mouse/Touch Bar的Kinetic滚动会连续触发一堆滚动事件，哪怕用户只是轻轻滚了一下，直接导致你的animateFunction被反复调用，一次跳好几个分段。你之前用3秒锁定的方案没生效，大概率是因为固定时长和实际动画节奏不匹配，而且没抓住“阻止惯性滚动的连续事件触发”这个关键点。

给你几个实操的解决思路，亲测有效：

1. 用「滚动状态锁」替代固定计时 #

别用固定的3秒锁定，而是基于当前动画是否完成来控制滚动权限。定义一个全局变量标记滚动状态，动画开始时上锁，动画结束后解锁，这样能精准拦截惯性滚动带来的重复触发。

2. 监听wheel事件而非scroll事件 #

scroll事件是滚动发生后才触发，而wheel事件能在用户滚动动作的瞬间捕获，更容易阻止浏览器的原生惯性滚动行为。

完整代码示例 #

// 全局锁：标记当前是否正在执行分段滚动动画
let isScrolling = false;
// 你的分段滚动动画时长（根据实际情况调整，比如1000ms）
const ANIMATION_DURATION = 1000;

// 替换原来的scroll事件监听，改用wheel事件
document.addEventListener('wheel', handleSegmentScroll);

function handleSegmentScroll(e) {
  // 如果正在滚动，直接阻止默认滚动行为并返回
  if (isScrolling) {
    e.preventDefault();
    return;
  }

  // 判断滚动方向：deltaY>0是向下，反之向上
  const scrollDirection = e.deltaY > 0 ? 'down' : 'up';

  // 上锁，阻止后续滚动事件触发
  isScrolling = true;

  // 执行你的分段滚动动画
  animateFunction(scrollDirection);

  // 方案A：如果是JS控制的动画，用setTimeout在动画结束后解锁
  setTimeout(() => {
    isScrolling = false;
  }, ANIMATION_DURATION);

  // 方案B：如果是CSS transition动画，监听transitionend事件解锁（更精准）
  // const container = document.querySelector('.your-fullpage-container');
  // container.addEventListener('transitionend', () => {
  //   isScrolling = false;
  // }, { once: true }); // once: true确保只触发一次监听
}

关键说明 #

• 为什么固定3秒没用？因为Mac的惯性滚动事件是在用户滚动后的几百毫秒内连续触发的，3秒太长，用户可能想再次滚动时还被锁定；如果动画实际只需要1秒，那剩下的2秒里惯性滚动的事件还是会触发，照样跳分段。
• e.preventDefault()一定要在isScrolling为true时调用，这样能直接阻止浏览器的原生惯性滚动，避免后续的滚动事件生成。
• 如果你的animateFunction有自己的完成回调，直接把isScrolling = false放在回调里是最精准的，比setTimeout更可靠。

这样调整后，不管用户用Magic Mouse滚多大的幅度，页面都会严格每次只滚动一个分段，完美解决Mac惯性滚动的问题！

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