overflow:hidden导致背景动画失效，如何与scroll snap共存实现全屏效果？

解决方案 #

方案1：独立背景动画层级（最推荐，无兼容问题） #

直接将背景动画容器从滚动吸附容器中拆分出来，作为body的直接子元素，用固定定位脱离文档流，完全避开overflow属性的影响：

<body>
  <!-- 独立背景容器 -->
  <div class="bg-animation"></div>
  <!-- 滚动吸附内容容器 -->
  <div class="scroll-snap-wrap">
    <h1>please help</h1>
    <!-- 其余页面内容 -->
  </div>
</body>

对应CSS配置：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* 不要给html/body加overflow: hidden */
}
.bg-animation {
  position: fixed;
  inset: 0; /* 等价于top/right/bottom/left都为0 */
  z-index: -1; /* 保证在所有文字内容下方 */
  /* 你原本的背景动画属性直接写在这里 */
}
.scroll-snap-wrap {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}
/* 你的滚动吸附子元素配置 */
.scroll-snap-wrap > section {
  height: 100vh;
  scroll-snap-align: start;
}

方案2：背景容器使用sticky定位（适配必须把背景放在滚动容器内的场景） #

如果业务逻辑要求背景必须放在滚动吸附容器内部，可改用粘性定位实现视口固定效果，不会被overflow属性截断：

/* 滚动容器内部的背景容器样式 */
.inner-bg {
  position: sticky;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none; /* 避免遮挡页面交互 */
  /* 背景动画属性写在这里 */
}

两种方案都可以同时保留完整的scroll snap滚动吸附效果，且背景动画始终铺满全屏位于内容下方，不需要额外JavaScript逻辑。

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