本文详解 firefox 下基于 `wheel` 事件 + `scrollintoview({behavior: “smooth”})` 实现的单页滚动(paging scroll)为何出现卡顿、跳页、失效等问题,并提供兼容性完善、防抖鲁棒、跨浏览器稳定的替代实现方案。
Firefox 对 scrollIntoView({behavior: “smooth”}) 的实现与 Chrome 存在关键差异:它不保证平滑滚动完成后再触发后续滚动逻辑,且 scrollend 事件在 Firefox 中长期未被支持(直至 v119+ 才有限支持,且 document.onscrollend 属非标准写法),导致你代码中 IsScrolling = false 的重置时机严重滞后或完全丢失。同时,wheel.preventDefault() 在 passive: false 下虽可阻止默认滚动,但 Firefox 对高频 wheel 事件的节流策略更激进,易造成 ScrollStart 被重复调用或状态错乱。
以下是经过全浏览器(Chrome、Firefox、Edge、Safari)实测验证的重构方案,核心改进点包括: