1. 原生监听：从历史事件到标准事件
1.1 浏览器对滚轮事件的早期实现
JS鼠标滚轮事件在早期浏览器中并非统一实现，常见的两大分支是 mousewheel 和 DOMMouseScroll，这导致同一动作在不同浏览器上的回调差异巨大。
在此阶段，开发者往往需要检测浏览器类型以决定使用哪一个事件，且回调参数并不一致，导致跨浏览器行为难以统一。这也是后来提出标准化事件的初衷之一，确保滚轮输入在不同环境下具有一致的入口。
// 兼容写法示例：在早期浏览器监听合并入口
function onWheelCompat(e){// 处理滚轮输入
}
window.addEventListener('mousewheel', onWheelCompat, {passive: false});
document.addEventListener('DOMMouseScroll', onWheelCompat, {passive: false});
1.2 wheel 事件的标准化及对比
随着 wheel 事件成为跨浏览器的标准入口，deltaY、deltaX、deltaZ 等属性开始用于描述滚轮的方向和距离，而 deltaMode 指示单位单位（像素、行、页）。
与旧有实现相比，wheel 提供了更清晰的单位和事件流，便于统一处理逻辑；同时，浏览器厂商逐步实现对该标准的全面支持，降低了后续兼容成本。
// 标准 wheel 事件处理示例
window.addEventListener('wheel', function(e){const dy = e.deltaY; // 滚轮在垂直方向上的单位距离// 处理逻辑
}, { passive: false });
1.3 事件对象的关键属性
在 wheel 事件中，deltaY 的符号决定滚动方向，deltaMode 决定单位（像素、行、页）；deltaX、deltaZ 也可用于水平方向和深度滚动的扩展场景。
理解这些属性的单位和方向，是实现跨浏览器一致响应的基础。为了兼容老旧浏览器，通常需要在同一处理函数内对 wheel 与旧事件做归一化处理以获得统一的输入量。
function normalizeWheelEvent(e){let delta = e.deltaY;// 兼容旧事件的回退if ('wheelDelta' in e) delta = -e.wheelDelta;// deltaMode：0 像素, 1 行, 2 页if (e.deltaMode === 1) delta *= 16;else if (e.deltaMode === 2) delta *= 96;return delta;
}2. 跨浏览器兼容性：统一处理滚轮输入
2.1 兼容性的核心挑战
跨浏览器兼容性的核心在于事件类型、事件对象属性及默认行为的差异，尤其在 IE/Edge/Chrome/Firefox 等平台间的实现差距。
为保证体验一致，通常需要实现一个统一入口，接收任意滚轮事件并输出一个标准化的滚轮增量值，供页面上的滚动或自定义行为使用。
2.2 如何统一 deltaY/deltaX
通过一个归一化函数，可以把 deltaY、wheelDelta 和单位差异转化为一个统一的数值，便于后续的滚动计算。
归一化的核心思想是：对所有来源都输出一个统一的“像素级滚动距离”值，同时保留方向信息，以实现一致的手感和动画。
function normalizeWheelEvent(e){let deltaY = e.deltaY;if ('wheelDelta' in e) deltaY = -e.wheelDelta;// deltaMode: 0 像素, 1 行, 2 页if (e.deltaMode === 1) deltaY *= 16;else if (e.deltaMode === 2) deltaY *= 96;return deltaY;
}2.3 使用 polyfill 与自定义归一化
为了快速得到良好的跨浏览器体验，可以采用现成的 polyfill 或库，如 normalize-wheel；若追求更小的依赖，也可以自定义一个轻量的归一化实现。
在实现时，建议使用 passive: false 的事件选项，以便在需要时使用 preventDefault() 阻止浏览器默认滚动，从而让自定义滚动逻辑拥有先决权。
// 使用 normalize-wheel 的思路（伪实现，不依赖外部库）
window.addEventListener('wheel', function(e){const delta = normalizeWheelEvent(e);// 使用 delta 进行自定义滚动
}, { passive: false });
3. 滚动平滑实现：从触发到视觉效果
3.1 使用 requestAnimationFrame 进行平滑滚动
实现滚动平滑的核心是通过 requestAnimationFrame 在时间轴上进行插值，逐步将当前滚动位置推至目标位置。
这种方式的优势在于自然的帧率匹配和动画的可控性，能够提供更流畅的视觉体验。
function smoothScrollTo(targetY, duration){const startY = window.scrollY || document.documentElement.scrollTop;const deltaY = targetY - startY;const startTime = performance.now();function step(now){const t = Math.min(1, (now - startTime) / duration);const ease = 0.5 - Math.cos(t * Math.PI) / 2; // easeInOutwindow.scrollTo(0, startY + deltaY * ease);if (t < 1) requestAnimationFrame(step);}requestAnimationFrame(step);
}3.2 可配置的滚动速度和阻尼
通过 duration、ease 与目标位移的组合，可以实现不同的滚动感受；阻尼参数决定了末端停留的平滑度。
对于不同容器或页面，建议暴露 speed、duration、easing 等参数，以便在 UI/UX 方面进行微调。
3.3 与滚动事件的节流/防抖
滚轮事件在高频率触发时容易造成性能下降，因此需要对处理逻辑进行 节流或 防抖，确保在短时间内只执行一次平滑滚动计算。
典型做法是在事件处理函数内部记下时间戳，并在一定时间窗口内忽略重复触发，从而维持稳定的帧率。
let lastTime = 0;
window.addEventListener('wheel', function(e){const now = performance.now();if (now - lastTime < 16) { // ~60fpse.preventDefault();return;}lastTime = now;const delta = normalizeWheelEvent(e);smoothScrollBy(0, delta);
}, { passive: false });4. 实践案例与现代方案：结合框架与 CSS
4.1 原生示例：简易平滑滚动
下面的示例展示如何在原生环境中，即时将滚轮输入转化为平滑滚动效果，且确保兼容性与自定义行为的结合。
核心思路是：在 wheel 事件中拦截默认滚动，计算一个合适的目标偏移量，并调用 smoothScrollTo 或 smoothScrollBy 完成动画。
document.addEventListener('wheel', function(e){e.preventDefault();const delta = normalizeWheelEvent(e);smoothScrollBy(0, delta);
}, { passive: false });4.2 使用 CSS 方案的组合
除了 JavaScript 端的平滑处理，浏览器原生的 CSS 方案也可以提供平滑滚动体验，尤其是在页面滚动层级较简单时，具备更低开销。
在全局层面可以使用 scroll-behavior 来实现原生平滑滚动，简单直接且对兼容性友好。
html { scroll-behavior: smooth; }4.3 第三方库对比与选型要点
有多种现成的解决方案可以加速开发，如 jquery.mousewheel、normalize-wheel、better-scroll 等。选型时应考虑 体积、浏览器覆盖率、API 易用性、以及是否影响原生滚动行为。
如果项目需要在复杂的容器内实现自定义滚动逻辑，优先考虑能提供清晰 API 与可配置参数的库，并确保它们与现有框架（如 React、Vue、Svelte）有良好集成。
