在某些特殊的网页设计场景中，例如页面内容从底部加载或需要模拟特定的视觉效果时，开发者可能需要实现“反向滚动”，即用户向上滚动鼠标滚轮时页面向下移动，向下滚动时页面向上移动。传统的实现方式，尤其是一些基于jquery的动画脚本，往往效率低下，容易导致滚动不连贯、卡顿，甚至无法完全阻止浏览器的默认滚动行为。
优化传统反向滚动脚本的痛点
常见的低效反向滚动脚本可能存在以下问题：
- 重复绑定事件监听器： 如果事件绑定逻辑被封装在函数中并多次调用，会导致同一个事件被重复监听，增加资源消耗。
- 动画冲突与性能瓶颈： 频繁地使用animate()方法来改变scrollTop，会与浏览器自身的滚动机制产生冲突，导致动画不流畅，尤其是在高频率的滚动事件中。
- preventDefault()失效： 未能正确配置事件监听器，导致event.preventDefault()无法完全阻止浏览器的默认滚动行为。
为了解决这些问题，我们可以采用纯JavaScript的原生API来实现更高效、更可控的反向滚动。
核心概念：wheel 事件与 scrollBy 方法
现代浏览器提供了强大的原生API来处理滚动事件，其中wheel事件和scrollBy方法是实现高效反向滚动的关键。
- wheel 事件： 当鼠标滚轮滚动或触摸板进行滚动操作时触发。它提供了deltaY属性，指示垂直滚动的方向和距离。正值通常表示向下滚动，负值表示向上滚动。
- event.preventDefault()： 这是阻止浏览器默认滚动行为的关键。然而，为了确保其有效性，addEventListener的options参数中必须明确设置passive: false。
- Math.sign()： 一个非常有用的数学函数，可以返回一个数的符号（1、-1或0），这使得判断滚动方向变得非常简洁。
- element.scrollBy()： 此方法允许元素相对于其当前位置进行滚动。与直接设置scrollTop相比，scrollBy更符合增量滚动的语义，并且在某些情况下表现更好。
纯JavaScript实现高效反向滚动
下面是使用纯JavaScript实现反向滚动的优化方案，它避免了jQuery依赖，并解决了上述性能问题：
立即学习“Java免费学习笔记（深入）”；
// 获取文档的根元素（通常是<html>元素），它是整个页面的可滚动容器
const elScroll = document.documentElement;
// 为根元素添加wheel事件监听器
elScroll.addEventListener("wheel", (evt) => {
// 阻止浏览器默认的滚动行为，这是实现反向滚动的关键
// 注意：为了让preventDefault()生效，addEventListener的第三个参数必须是 { passive: false }
evt.preventDefault();
// 计算滚动方向和强度
// evt.deltaY > 0 表示向下滚动（正值）
// evt.deltaY < 0 表示向上滚动（负值）
// 我们需要反向滚动，所以使用 -evt.deltaY 来反转方向
// Math.sign() 返回 -1, 0, 或 1，表示数值的符号
const delta = Math.sign(-evt.deltaY);
// 根据计算出的方向和预设的滚动速度进行滚动
// 70 是每次滚动的像素步长，可以根据需求调整
elScroll.scrollBy({
top: 70 * delta,
// behavior: "smooth" // 注意：在此场景下，平滑滚动可能无法按预期工作
});
}, { passive: false }); // 明确设置 passive: false 以允许调用 preventDefault()为了测试上述代码，确保你的页面内容足够长，可以添加一些简单的CSS样式：
body {
border: 3px dashed; /* 仅为视觉效果 */
height: 300vh; /* 确保页面有足够的滚动高度 */
}将上述JavaScript代码嵌入到你的网页中，当用户滚动鼠标滚轮时，页面将实现反向滚动：向上滚动滚轮时页面向下移动，向下滚动滚轮时页面向上移动。
注意事项与限制
在实现反向滚动功能时，需要注意以下几点：
- passive: false 的重要性： addEventListener的passive选项默认为true，这意味着事件监听器不会调用preventDefault()。为了确保我们的反向滚动逻辑能够阻止浏览器的默认滚动，必须显式地将passive设置为false。
- 平滑滚动 (behavior: "smooth") 的限制： 尽管scrollBy方法支持behavior: "smooth"选项，但在这种高频率触发的wheel事件中，直接使用它可能无法产生预期的平滑效果，甚至可能导致滚动体验不佳。如果需要平滑的反向滚动动画，可能需要自定义一个动画循环（例如使用requestAnimationFrame）来逐步改变scrollTop，但这会增加代码的复杂性。
- 用户体验： 反向滚动是一种非标准的交互模式，可能与大多数用户的习惯不符。在应用此功能时，请确保有清晰的视觉提示或使用说明，避免用户困惑。
- 目标元素： 在大多数情况下，document.documentElement（即<html>元素）是正确的滚动目标。但在某些特定布局或旧版浏览器中，document.body可能才是实际的滚动容器。请根据你的页面结构进行测试。
- 兼容性： wheel事件和scrollBy方法在现代浏览器中得到了广泛支持。对于需要兼容非常老旧浏览器的项目，可能需要考虑Polyfill或备用方案。
总结
通过利用原生JavaScript的wheel事件和scrollBy方法，我们可以构建出高效、流畅且易于维护的反向滚动功能。这种方法避免了传统jQuery动画可能带来的性能问题和冲突，提供了更直接、更可控的滚动体验。尽管平滑滚动存在一些限制，但通过精心设计和测试，开发者可以为用户提供独特而引人入胜的网页交互。在实施任何非标准滚动行为时，始终将用户体验放在首位，并提供必要的指导。
