Google Chrome scroll-snap过度滚动Bug求助：滚动边界异常问题

问题描述 #

在MacOS的Google Chrome 131.0.6778.86版本中，配置基础scroll-snap滚动吸附后出现无边界滚动问题：页面顶部可向上过度滚动，底部可向下过度滚动，超出文档实际内容范围。

简化复现代码：

HTML #

<html>
  <body>
    <div class="a"></div>
    <div class="b"></div>
  </body>
</html>

CSS #

html {
  scroll-snap-type: y mandatory;
}

.a {
  scroll-snap-align: start;
  height: 100vh;
}

.b {
  scroll-snap-align: start;
  height: 33.3vh;
}

修复方案 #

方案1：使用overscroll-behavior抑制过度滚动 #

给html元素添加overscroll-behavior-y: contain，该属性会阻止浏览器的过度滚动弹性效果，同时保留scroll-snap的吸附功能：

html {
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain; /* 新增 */
}

.a {
  scroll-snap-align: start;
  height: 100vh;
}

.b {
  scroll-snap-align: start;
  height: 33.3vh;
}

方案2：调整滚动容器到body元素 #

将scroll-snap的配置从html转移到body，同时限制html的高度和overflow，强制Chrome遵守滚动边界：

html {
  height: 100%;
  overflow: hidden; /* 限制html的滚动范围 */
}

body {
  height: 100%;
  overflow-y: auto; /* 让body成为滚动容器 */
  scroll-snap-type: y mandatory;
  margin: 0; /* 清除默认边距避免额外滚动空间 */
}

.a {
  scroll-snap-align: start;
  height: 100vh;
}

.b {
  scroll-snap-align: start;
  height: 33.3vh;
}

原理说明 #

Chrome在根元素（html）上应用scroll-snap时，对文档滚动边界的处理存在bug，允许过度滚动超出内容范围。两种方案分别通过：

1. 直接抑制过度滚动行为
2. 转移滚动容器到body并限制根元素的滚动范围
   来强制Chrome遵守文档的实际滚动边界，同时不破坏scroll-snap的吸附功能。

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