仅Chrome浏览器出现scroll-snap-type滚动偏移问题，求原因及解决方案

问题产生原因 #

该问题属于 Chrome 内核的已知兼容性差异，核心诱因有三点：

• Chrome 对鼠标滚轮的默认滚动步长计算逻辑和 Firefox、Edge 不同，scroll-snap-type: y mandatory 触发吸附时，会将滚轮单次滚动的默认像素步长和吸附对齐逻辑叠加计算，误判为用户需要滚动超过一个吸附单元的距离
• 若吸附子元素的高度没有严格和父容器的可视视口高度匹配，Chrome 的滚动边界计算会出现 1-2px 的误差，触发二次吸附逻辑，导致多滚一行
• Chrome 对 scroll-snap-stop 属性的默认实现为 normal，不会强制在当前吸附单元停止，会继续响应剩余的滚轮滚动动量

可行解决方案 #

方案1：CSS 原生属性修复（优先推荐） #

通过调整滚动吸附相关属性即可覆盖 90% 以上的场景，无需额外 JS：

/* AGIT板块滚动父容器，原有scroll-snap-type属性保留 */
.agit-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  scroll-behavior: smooth;
  /* 可选：旧版Chrome加这个避免滚动动量溢出 */
  overscroll-behavior: contain;
}

/* 逐段滚动的子吸附单元 */
.agit-section {
  scroll-snap-align: start;
  /* 核心修复：强制单次滚动只能停在当前吸附单元，抵消滚轮步长误差 */
  scroll-snap-stop: always;
  /* 确保子元素高度严格等于父容器可视高度，避免计算误差 */
  height: 100vh;
  box-sizing: border-box;
}

注：代码中的.agit-container和.agit-section请替换为你实际使用的对应容器选择器。

方案2：JS 节流强制修正（CSS方案无效时使用） #

如果仍存在滚动误差，可以通过少量 JS 劫持滚轮事件，强制每次滚动固定高度：

const scrollContainer = document.querySelector('.agit-container');
let isScrolling = false;

scrollContainer.addEventListener('wheel', (e) => {
  // 阻止默认滚动行为
  e.preventDefault();
  if (isScrolling) return;
  isScrolling = true;
  
  // 判断滚动方向，每次滚动高度等于父容器可视高度
  const scrollDelta = e.deltaY > 0 ? scrollContainer.clientHeight : -scrollContainer.clientHeight;
  scrollContainer.scrollBy({
    top: scrollDelta,
    behavior: 'smooth'
  });

  // 节流时间匹配滚动动画时长即可，通常300-400ms
  setTimeout(() => {
    isScrolling = false;
  }, 350);
}, { passive: false });

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