JavaScript 中通过 wheel 事件的 deltaY 判断滚动方向：deltaY < 0 为向上，> 0 为向下；deltaX 用于水平滚动；deltaMode 决定单位（0 像素、1 行、2 页），建议统一转为像素处理，并注意跨平台符号差异。
在 JavaScript 中，可以通过监听 wheel 事件获取鼠标滚轮的滚动方向和距离，核心是读取事件对象的 deltaY（垂直方向）、deltaX（水平方向）和 deltaMode（单位模式）属性。
判断滚动方向
deltaY 是最常用、最可靠的判断垂直滚动方向的属性：
- 当 向上滚动（页面内容向上移动，即视图向上翻）时，
deltaY < 0 - 当 向下滚动（页面内容向下移动，即视图向下翻）时，
deltaY > 0 - 若支持水平滚轮（如 Shift + 滚轮），可用
deltaX：向右为正，向左为负
获取滚动距离（数值大小）
deltaY 或 deltaX 的绝对值代表滚动“量”，但要注意其单位受 deltaMode 影响：
-
deltaMode === 0：单位为 像素（大多数现代浏览器默认） -
deltaMode === 1：单位为 行（line，通常 ≈ 40px，取决于字体/行高） -
deltaMode === 2：单位为 页（page，约等于视口高度）
建议统一转换为像素进行处理（可参考 MDN wheel event docs 提供的换算逻辑）。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
兼容性与推荐写法
使用标准 wheel 事件即可，无需监听已废弃的 mousewheel 或 DOMMouseScroll：
element.addEventListener('wheel', (e) => {
const isScrollUp = e.deltaY < 0;
const scrollAmount = Math.abs(e.deltaY);
// 转换为像素（简化版，实际可按 deltaMode 分情况处理）
let pixelDelta = e.deltaY;
if (e.deltaMode === 1) pixelDelta *= 40; // 行 → 像素估算
if (e.deltaMode === 2) pixelDelta *= window.innerHeight; // 页 → 像素估算
console.log(`滚动方向：${isScrollUp ? '上' : '下'}，像素量：${pixelDelta}`);
});
注意跨平台差异
不同设备/浏览器返回的 deltaY 数值可能有差异：
- macOS Safari 和 Chrome 在自然滚动（惯性滚动）下，
deltaY符号与 Windows 相反（但逻辑一致：负值仍表示内容向上移） - 触控板快速滑动会产生多个小增量，而鼠标滚轮通常是较大离散值
- 不要依赖固定阈值判断“一次滚动”，应累积或节流处理高频事件
