Google Chrome Scroll Snapping疑似Bug：鼠标滚轮滚动吸附延迟不流畅

API 探路者

2026-5-9

Scroll Snapping在Chrome中滚轮滚动不流畅的问题分析与解决

首先可以明确：这不是你的代码问题，而是Chrome 85.0.4183.102版本的已知滚动吸附实现bug，你的代码逻辑完全正确，Firefox中的正常表现也验证了这一点。

问题原因

Chrome在这个版本中，对html元素作为滚动容器时的鼠标滚轮滚动事件处理存在优先级冲突，导致滚动吸附触发延迟、动画不流畅；而Firefox的滚动吸附实现逻辑与Chrome不同，因此没有出现这个问题。

可行的修复方案

方案1：更换滚动容器到`body`

把滚动相关属性从html移到body上，规避Chrome对根元素的特殊处理逻辑：

html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  height: 100%; /* 确保body能撑满视口 */
}
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
section {
  width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
}

方案2：添加`overscroll-behavior-y`属性

在滚动容器上添加overscroll-behavior-y: contain;，阻止Chrome的滚动溢出行为，减少滚动事件冲突：

html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain; /* 新增该行 */
}