body标签设置scroll-snap-type: y后scroll-snapping滚动吸附功能失效如何解决

问题原因 #

• 滚动容器配置错误：当前你把scroll-snap-type等吸附属性加在了<body>标签上，但浏览器默认的全局滚动行为是挂载在<html>根元素上的，且<html>没有显式设置高度的情况下，<body>本身不会产生独立滚动，吸附规则自然无法触发。
• 使用了已废弃的API：scroll-snap-points-y是CSS滚动吸附早期草案中的属性，目前已被所有主流浏览器移除支持，该属性存在反而可能干扰正常的规则生效。

修复方案 #

直接替换你的CSS代码为下方内容即可在Chrome、Firefox中正常运行：

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

body {
  height: 100%;
}

header {
  height: 100vh;
  width: 100%;
  background: #ff0000;
  scroll-snap-align: start;
}

div {
  height: 100vh;
  width: 100%;
  background: blue;
  scroll-snap-align: start;
}

section {
  height: 100vh;
  width: 100%;
  background: yellow;
  scroll-snap-align: start;
}

修复说明 #

1. 将滚动吸附的相关配置从<body>移到<html>根元素，保证吸附规则绑定到实际的全局滚动容器上
2. 给<html>和<body>都设置height: 100%，确保滚动容器尺寸符合预期
3. 移除废弃的scroll-snap-points-y属性，现有标准下只需要通过子元素的scroll-snap-align即可完成吸附位置配置

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