如何检测Trackpad Wheel End事件以实现macOS Launchpad类动画？

原生Web API中并没有直接的Wheel End事件，但可以通过以下几种方案实现类似需求，适配你要做的macOS Launchpad风格动画：

方案1：Wheel事件结合定时器防抖 #

这是最通用的方案，适用于触摸板和鼠标滚轮场景：

• 核心逻辑：每次触发wheel事件时重置定时器，当设定的延迟时间内没有新的滚轮事件，就判定为用户手指抬起（滚轮操作结束）
• 代码示例：

let wheelTimer;
// 延迟时间可根据设备灵敏度调整，触摸板建议100-200ms
const WHEEL_END_DELAY = 150;

window.addEventListener('wheel', (e) => {
  // 处理滚轮滑动过程中的动画逻辑，比如元素缩放、位移
  updateLaunchpadAnimation(e.deltaY);

  // 清除上一次的定时器
  clearTimeout(wheelTimer);
  // 重新设置定时器，延迟后触发结束逻辑
  wheelTimer = setTimeout(() => {
    finishLaunchpadAnimation();
  }, WHEEL_END_DELAY);
});

function updateLaunchpadAnimation(delta) {
  // 这里写滚动中的动画逻辑，比如根据delta值调整元素的缩放比例
  console.log('滚轮滑动中，偏移量:', delta);
}

function finishLaunchpadAnimation() {
  // 手指抬起后执行的收尾动画，比如回弹到目标位置、恢复元素状态
  console.log('滚轮操作结束，执行收尾动画');
}

方案2：Pointer事件追踪触摸状态（针对触摸板） #

触摸板的滚轮操作本质是触摸输入，可以通过pointerdown/pointerup事件精准追踪手指状态：

• 核心逻辑：通过pointerType判断是否为触摸输入，标记滚动状态，手指抬起时触发结束逻辑
• 代码示例：

let isTouchpadScrolling = false;

window.addEventListener('pointerdown', (e) => {
  // 识别触摸板输入（部分设备会把触摸板滚轮识别为touch类型）
  if (e.pointerType === 'touch') {
    isTouchpadScrolling = true;
  }
});

window.addEventListener('pointerup', (e) => {
  if (e.pointerType === 'touch' && isTouchpadScrolling) {
    isTouchpadScrolling = false;
    finishLaunchpadAnimation();
  }
});

window.addEventListener('wheel', (e) => {
  if (isTouchpadScrolling) {
    updateLaunchpadAnimation(e.deltaY);
  }
});

// 复用上面的updateLaunchpadAnimation和finishLaunchpadAnimation函数

注意：部分桌面触摸板可能将滚轮事件识别为mouse类型的pointer，需要根据目标设备做兼容性测试。

方案3：CSS Scroll Snap + Scrollend事件（滚动容器场景） #

如果你的Launchpad效果基于滚动容器，可以结合CSS滚动吸附和原生scrollend事件：

• 核心逻辑：用CSS让滚动自动吸附到固定位置，再通过scrollend事件监听滚动结束（即手指抬起后的状态）
• 代码示例：

.launchpad-container {
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  height: 100vh;
}

.launchpad-item {
  scroll-snap-align: center;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

const container = document.querySelector('.launchpad-container');

// 监听滚动结束事件
container.addEventListener('scrollend', () => {
  finishLaunchpadAnimation();
});

// 监听滚动过程，处理动画
container.addEventListener('scroll', () => {
  updateLaunchpadAnimation(container.scrollTop);
});

注意：scrollend事件仅支持现代浏览器（Chrome 108+、Firefox 103+等），如果需要兼容旧浏览器，可回退到方案1。

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