如何让Scroll Snap与JS滚动事件监听器兼容正常工作？

冲突原因 #

原生CSS scroll-snap 仅对用户主动触发的原生滚动行为生效，直接通过JS修改scrollLeft属于程序化滚动，不会触发原生吸附判定；同时开启mandatory等级的强制吸附时，JS逐像素累加的滚动偏移会被浏览器立刻拉回当前吸附点，表现为滚轮事件逻辑失效。

方案1：保留原生scroll-snap（推荐，性能最优） #

不需要自己实现吸附逻辑，仅调整滚轮事件的处理逻辑，把逐像素累加偏移改为按区块跳转，完全复用原生滚动和吸附能力，稳定性最好。

完整CSS代码 #

* {
  margin: 0;
}

.container {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  /* 隐藏默认横向滚动条 */
  scrollbar-width: none;
}
/* 兼容webkit内核浏览器隐藏滚动条 */
.container::-webkit-scrollbar {
  display: none;
}

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

#section1 {
  background: red;
}

#section2 {
  background: yellow;
}

#section3 {
  background: blue;
}

完整JS代码 #

const scrollContainer = document.querySelector('.container');
const sections = document.querySelectorAll('section');
// 滚动锁，避免动画过程中重复触发导致跳页
let isScrolling = false;

scrollContainer.addEventListener('wheel', (e) => {
  e.preventDefault();
  if (isScrolling) return;
  isScrolling = true;

  // 计算当前处于可视区的区块索引
  const currentIndex = Math.round(scrollContainer.scrollLeft / scrollContainer.clientWidth);
  // 根据滚轮方向判定目标区块：deltaY>0是向下滚，跳转到下一个区块，反之跳上一个
  const targetIndex = Math.max(
    0,
    Math.min(
      e.deltaY > 0 ? currentIndex + 1 : currentIndex - 1,
      sections.length - 1
    )
  );

  // 原生平滑滚动到目标位置，scroll-snap自动完成对齐
  sections[targetIndex].scrollIntoView({
    behavior: 'smooth',
    block: 'nearest',
    inline: 'start'
  });

  // 等待滚动动画结束后释放锁，时长可根据需要的动画速度调整
  setTimeout(() => {
    isScrolling = false;
  }, 700);
}, { passive: false }); // 必须设置passive:false，否则preventDefault会失效

HTML代码不需要调整，和原有结构一致即可。 #

方案2：自定义吸附逻辑（交互更灵活） #

如果需要滚轮滚动时内容逐像素跟手移动，停止操作后再自动吸附到最近区块，可以关闭原生scroll-snap，自行实现轻量吸附逻辑，灵活度更高。

CSS调整 #

去掉原生scroll-snap相关配置即可，其余样式保留：

* {
  margin: 0;
}

.container {
  display: flex;
  overflow-x: scroll;
  scrollbar-width: none;
}
.container::-webkit-scrollbar {
  display: none;
}

section {
  height: 100vh;
  min-width: 100vw;
}

#section1 {
  background: red;
}

#section2 {
  background: yellow;
}

#section3 {
  background: blue;
}

JS代码 #

const scrollContainer = document.querySelector('.container');
const sections = document.querySelectorAll('section');
let snapTimer = null;

scrollContainer.addEventListener('wheel', (e) => {
  e.preventDefault();
  // 逐像素累加横向滚动偏移，实现跟手效果
  scrollContainer.scrollLeft += e.deltaY;

  // 清除上一次的吸附定时器
  if (snapTimer) clearTimeout(snapTimer);
  // 停止滚动150ms后，自动吸附到最近的区块
  snapTimer = setTimeout(() => {
    const nearestIndex = Math.round(scrollContainer.scrollLeft / scrollContainer.clientWidth);
    sections[nearestIndex].scrollIntoView({
      behavior: 'smooth',
      inline: 'start'
    });
  }, 150);
}, { passive: false });

选型建议 #

• 需求是整屏翻页、优先保证性能和稳定性，选方案1
• 需要跟手滚动、自定义滚动动画细节，选方案2

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