Firefox中scroll-snap-type导致小页脚点击跳转无法触发链接如何解决

该问题是Firefox对scroll-snap-type: mandatory的标准实现逻辑和Chrome/Safari存在差异导致的：当滚动容器的可滚动底部剩余空间小于吸附目标的高度时，Firefox会强制将视口回弹到最近的完整吸附区块，点击操作触发的页面重绘就会触发这个回弹逻辑，导致页脚链接无法点击。

方案1：等高容器包裹页脚（兼容性最优，无视觉影响） #

在footer外新增一个高度为100vh的父容器，父容器承担滚动吸附锚点的作用，footer本身保留25vh高度靠下排列，完全符合所有浏览器的滚动吸附判定规则，不会触发回弹。

修改后的代码片段 #

HTML部分：

<main>
  <section>1</section>
  <section>2</section>
  <!-- 新增等高包裹容器 -->
  <div class="footer-wrapper">
    <footer>
      <a href="https://stackoverflow.com/" target="_blank">Stack Overflow</a>
    </footer>
  </div>
</main>

新增CSS样式：

.footer-wrapper {
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

方案2：修改滚动吸附模式（改造成本最低） #

如果可以接受吸附灵敏度降低，将mandatory强吸附模式改为proximity弱吸附模式，该模式仅在滚动位置接近吸附点时才会触发吸附，不会强制回弹，点击页脚不会触发回跳。

修改后的代码片段 #

main {
  /* 仅修改这一行即可，其余样式保留 */
  scroll-snap-type: y proximity;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: scroll;

  /* 旧浏览器前缀同步修改 */
  -webkit-scroll-snap-type: y proximity;
  -ms-scroll-snap-type: y proximity;
  scroll-snap-type-y: proximity;
  scroll-snap-points-y: repeat(100%);
}

方案3：给滚动容器添加底部内边距 #

给滚动容器main添加和footer高度相等的底部内边距，让滚动容器的可滚动空间刚好容纳所有内容，适配Firefox的吸附判定逻辑。

修改后的代码片段 #

main {
  scroll-snap-type: y mandatory;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: scroll;
  /* 新增两行样式 */
  padding-bottom: 25vh;
  box-sizing: border-box;

  /* 旧浏览器前缀保留 */
  -webkit-scroll-snap-type: y mandatory;
  -ms-scroll-snap-type: y mandatory;
  scroll-snap-type-y: mandatory;
  scroll-snap-points-y: repeat(100%);
}

• 若需要保留强吸附效果、不接受视觉改动，优先选方案1
• 若不想修改DOM结构、可接受弱吸附效果，优先选方案2
• 若既不想改DOM也不想改吸附模式，可选方案3

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