如何在惯性滚动前即时触发停止滚动时的函数（使用wheel事件）

要实现用户停止主动滚动的瞬间立即执行函数，不等待惯性滚动结束，核心是区分「用户主动操作触发的滚动」和「浏览器惯性滚动」——wheel事件仅在用户主动滚动（鼠标滚轮、触摸板滑动）时触发，惯性滚动阶段不会触发该事件，我们可以利用这一点来实现需求：

核心代码实现 #

// 用于存储定时器ID
let scrollTimeout;

// 你需要执行的目标函数
const onUserStopScroll = () => {
  console.log("用户已停止主动滚动，立即执行操作");
  // 这里写入你的业务逻辑
};

// 监听桌面端wheel事件
window.addEventListener('wheel', () => {
  // 清除之前的定时器，避免重复触发
  clearTimeout(scrollTimeout);
  // 设置10ms阈值：用户停止主动滚动10ms后执行函数
  // 这个阈值足够小，几乎等同于"瞬间"响应，同时过滤连续滚动的重复触发
  scrollTimeout = setTimeout(onUserStopScroll, 10);
}, { passive: true });

// 兼容触摸设备：监听手指离开屏幕事件
window.addEventListener('touchend', () => {
  // 用户手指离开屏幕的瞬间，直接执行函数
  onUserStopScroll();
}, { passive: true });

方案说明 #

1. 区分主动/惯性滚动：wheel事件仅在用户主动操作（滚轮滚动、触摸板滑动）时触发，惯性滚动过程中不会触发该事件，因此我们可以通过监听wheel事件的中断来判断用户是否停止主动滚动。
2. 短阈值定时器：设置10ms的短延迟，既可以过滤用户连续滚动时的重复wheel事件，又能保证在用户停止操作的瞬间几乎无延迟地执行目标函数，完全不会等待惯性滚动结束。
3. 触摸设备兼容：通过touchend事件监听用户手指离开屏幕的动作，此时直接执行函数，完美匹配触摸场景下的"停止滚动瞬间"需求。
4. 不影响正常滚动：全程未使用e.preventDefault()，不会阻止浏览器的惯性滚动行为，完全保留原生滚动体验。

为什么其他方案不适用 #

• 依赖scroll事件+长延迟的方案：会等待惯性滚动完全结束才触发函数，不符合你"立即执行"的要求；
• 强制停止惯性滚动的方案：需要使用e.preventDefault()，但你明确表示该方法无法解决你的问题，而本方案完全不干扰原生滚动逻辑。

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