scroll snap容器中向上滚动后Footer粘性问题求助

你遇到的问题核心是页脚被包含在scroll snap容器内，继承了滚动吸附规则。以下是两种可行的解决办法：

• 将页脚移出scroll snap容器
  把需要全屏吸附的<section>元素单独放在scroll snap容器内，页脚放在容器外部。这样容器的滚动吸附规则只会作用于内部的section，页脚完全不受影响。示例结构：

  <div class="scroll-snap-container">
    <section class="full-screen">...</section>
    <section class="full-screen">...</section>
  </div>
  <footer>...</footer>
  

• 给页脚设置scroll-snap-align: none
  如果无法调整DOM结构，直接给页脚添加该样式，强制它不参与滚动吸附。这个属性会覆盖容器中继承的scroll-snap-align值（比如默认的start）：

  footer {
    scroll-snap-align: none;
  }
  

你之前尝试的position: absolute无效，是因为即使页脚脱离文档流，它依然处于scroll snap容器的范围内，容器的吸附规则还是会作用于它。上面两种方法才是从scroll snap本身的规则入手解决问题。

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