设置为mandatory的scroll snap type表现出proximity特性的问题

你的问题出在滚动容器嵌套和容器配置冲突上：

• 将body设为scroll-snap容器的同时给maincontent添加overflow: scroll，会形成两层滚动上下文，小幅度滚动时浏览器会优先响应内部滚动，导致外层的mandatory对齐规则失效，表现出类似proximity的特性。
• body本身的默认滚动行为，加上手动设置的height:100vh + overflow-y:scroll，会进一步干扰scroll-snap的精准触发逻辑。

修复方案 #

1. 创建独立的scroll-snap容器，避免使用body作为滚动容器，消除默认样式干扰
2. 移除maincontent的overflow: scroll，让整个页面的滚动由外层容器统一控制
3. 确保子元素的滚动对齐规则正确，且容器的滚动上下文纯净

修改后的HTML

<body>
  <div class="scroll-container">
    <div class='hero'>
      HERO HTML
    </div>
    <div class='maincontent'>
      MAIN CONTENT HTML
    </div>
  </div>
</body>

修改后的CSS

/* 重置body默认margin，避免滚动容器出现不必要的留白 */
body {
  margin: 0;
}

.scroll-container {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.hero {
  width: 100%;
  height: 100vh;
  scroll-snap-align: start;
}

.maincontent {
  width: 100%;
  /* 用min-height保证至少占满视口，同时支持内容超出时正常滚动 */
  min-height: 100vh;
  scroll-snap-align: start;
}

关键调整说明 #

• 独立的scroll-container作为唯一滚动上下文，确保scroll-snap的强制对齐规则稳定生效
• 移除maincontent的overflow: scroll，彻底避免嵌套滚动对对齐逻辑的干扰
• maincontent改用min-height:100vh，既保证初始状态占满视口，又能在内容过多时自然撑开高度，维持正常滚动
• 重置body默认margin，防止容器出现不必要的滚动留白

调整后，无论大幅度滚动还是触控板小幅度精准滚动，都会强制触发scroll-snap的对齐效果，不会再出现hero与主内容各占部分屏幕的情况。

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