window.scrollBy()绑定mousewheel事件无效的解决方法咨询

这问题我之前调试的时候也踩过坑！核心原因是mousewheel事件自带浏览器默认的滚动行为——当你滚动鼠标滚轮时，浏览器会自动触发小幅度的滚动，这个默认行为会和你自定义的window.scrollBy(0, window.innerHeight)（滚动一屏）产生冲突，导致你的自定义滚动效果被覆盖，看起来就像没作用一样。而click事件本身没有默认的滚动行为，所以你的代码能正常工作。

解决方案：阻止默认滚动行为 #

只需要在事件处理函数里先调用event.preventDefault()，把浏览器的默认滚动行为禁用掉，你的自定义滚动就能生效了。修改后的代码如下：

document.getElementsByClassName("elementor-section-wrap")[0].addEventListener('mousewheel', function(event) {
  // 阻止浏览器默认的滚轮滚动行为
  event.preventDefault();
  // 执行自定义的整屏滚动
  window.scrollBy(0, window.innerHeight);
}, false);

进阶优化：支持双向滚动（可选） #

如果需要支持向上滚动时也反向滚动一屏，可以通过event.deltaY判断滚轮方向（正数表示向下滚，负数表示向上滚），调整滚动的距离：

document.getElementsByClassName("elementor-section-wrap")[0].addEventListener('mousewheel', function(event) {
  event.preventDefault();
  // 根据滚轮方向确定滚动量
  const scrollDistance = event.deltaY > 0 ? window.innerHeight : -window.innerHeight;
  window.scrollBy(0, scrollDistance);
}, false);

兼容性提示 #

部分浏览器（比如Firefox早期版本）对mousewheel事件支持不佳，标准的滚轮事件是wheel，如果上面的代码在某些浏览器不生效，可以换成wheel事件：

document.getElementsByClassName("elementor-section-wrap")[0].addEventListener('wheel', function(event) {
  event.preventDefault();
  const scrollDistance = event.deltaY > 0 ? window.innerHeight : -window.innerHeight;
  window.scrollBy(0, scrollDistance);
}, false);

注意：阻止默认行为后，该元素范围内的原生滚轮滚动会完全被替代，如果你需要保留部分原生滚动逻辑，可能需要额外做条件判断。

内容的提问来源于stack exchange，提问作者Lance 7in