CSS 属性 scroll-snap-type 防止点击 Firefox答案

【问题标题】：CSS property scroll-snap-type prevent click with FirefoxCSS 属性 scroll-snap-type 防止点击 Firefox
【发布时间】：2022-01-11 06:18:05
【问题描述】：

我的页面有一些高度为 100vh 且页脚较小的部分：

<!DOCTYPE html>
<html>
  <head>
    <title>Scroll Snap Y</title>
    <style>
      body {
        margin: 0;
        font-family: sans-serif;
        font-size: 40px;
      }
      main {
        scroll-snap-type: y mandatory;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: scroll;

        /* For old browsers */
        -webkit-scroll-snap-type: y mandatory;
        -ms-scroll-snap-type: y mandatory;
        scroll-snap-type-y: mandatory;
        scroll-snap-points-y: repeat(100%);
      }
      section,
      footer {
        display: grid;
        align-items: center;
        justify-content: center;
        scroll-snap-align: start;
      }
      section {
        height: 100vh;
      }
      section:nth-child(1) {
        background-color: #f00;
      }
      section:nth-child(2) {
        background-color: #0f0;
      }
      footer {
        background-color: #0ff;
        height: 25vh;
      }
    </style>
  </head>
  <body>
    <main>
      <section>1</section>
      <section>2</section>
      <footer>
        <a href="https://stackoverflow.com/" target="_blank">Stack Overflow</a>
      </footer>
    </main>
  </body>
</html>

它在 Chrome 和 Safari 中非常完美，我滚动到页脚并按预期点击链接：

Video screen capture in Chrome

但是在 Firefox 中，当我点击页脚的任意位置时，页面滚动到上一个部分（图片上的绿色部分），因此我无法点击页脚中的链接，这是不可能的，因为页面滚动系统地转到上一节：

Video screen capture in Chrome

如果页脚的高度为 100vh，则页面在 Firefox 中的行为很好，但我想要一个小的页脚，我不想要一个高度为 100vh 的页脚。

您有什么想法可以让我点击页脚中的链接吗？

【问题讨论】：

标签： html css firefox click scroll-snap-type

【解决方案1】：

我通过为页脚设置scroll-snap-align: end; 修复了这个 Firefox 的错误。

【讨论】：