如何在启用CSS Scroll Snap时让鼠标滚轮wheel事件监听器正常工作

启用CSS scroll snap特性时，会导致JavaScript wheel事件监听器无法正常运行。
搭建横向滚动网站时，可通过添加wheel事件监听器，实现鼠标滚轮滚动时容器沿X轴横向滚动的效果，初始实现代码如下：

const scrollContainer = document.querySelector('.container');

scrollContainer.addEventListener('wheel', (e) => {
    e.preventDefault();
    scrollContainer.scrollLeft += e.deltaY;
});

* {
  margin: 0;
}

.container {
  display: flex;
  overflow-x: scroll;
  /*scroll-snap-type: x mandatory;*/
}

section {
  height: 100vh;
  width: 300vw;
  min-width: 100vw;
  /*scroll-snap-align: start;*/
}

#section1 {
  background: red;
}

#section2 {
  background: yellow;
}

#section3 {
  background: blue;
}

<html>
  <div class="container">
    <section id="section1"></section>
    <section id="section2"></section>
    <section id="section3"></section>
  </div>
</html>

添加如下CSS代码启用scroll snap效果时：

.container {
  scroll-snap-type: x mandatory;
}

section {
  scroll-snap-align: start;
}

会出现两个异常：

• wheel事件绑定的横向滚动逻辑失效
• scroll snap原生吸附效果同步失效
  经定位，事件回调中的e.preventDefault();是触发问题的直接原因。

浏览器的scroll snap吸附逻辑是原生滚动事件流的一部分，调用e.preventDefault()会直接中断整个原生滚动流程，浏览器不会执行后续的吸附位置计算；同时手动修改scrollLeft的操作属于JS触发的强制滚动，和被中断的原生滚动逻辑产生冲突，最终导致两种效果都无法正常运行。
另外部分现代浏览器默认将wheel事件注册为passive: true模式，这种模式下调用e.preventDefault()本身就会失效，还会在控制台抛出警告。

方案1：调整滚动实现逻辑（优先推荐） #

修改wheel事件监听逻辑，使用原生scrollBy方法触发滚动，同时明确声明事件为非被动模式，让浏览器可以正常执行snap判定：

const scrollContainer = document.querySelector('.container');

scrollContainer.addEventListener('wheel', (e) => {
    if (e.deltaY === 0) return;
    e.preventDefault();
    // 用原生scrollBy替代直接修改scrollLeft，保留snap生效的上下文
    scrollContainer.scrollBy(e.deltaY, 0);
}, { passive: false });

注意：不要给scrollBy设置behavior: 'smooth'参数，平滑滚动会打断snap的即时吸附逻辑，导致吸附位置偏移。

方案2：滚动时临时切换snap状态（兼容低版本浏览器） #

如果方案1在部分旧版本浏览器存在兼容问题，可以在滚动过程中临时关闭snap，滚动停止后再恢复，触发浏览器自动吸附：

const scrollContainer = document.querySelector('.container');
let scrollEndTimer = null;

scrollContainer.addEventListener('wheel', (e) => {
    e.preventDefault();
    // 滚动过程中临时关闭吸附，避免逻辑冲突
    scrollContainer.style.scrollSnapType = 'none';
    scrollContainer.scrollLeft += e.deltaY;

    clearTimeout(scrollEndTimer);
    // 滚轮操作停止100ms后恢复snap，自动吸附到最近对齐点
    scrollEndTimer = setTimeout(() => {
        scrollContainer.style.scrollSnapType = 'x mandatory';
    }, 100);
}, { passive: false });

内容的提问来源于stack exchange，提问作者Matthew98