CSS 属性 scroll-snap-type 阻止点击 Firefox

Question

我的页面有一些部分的高度为 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://whosebug.com/" target="_blank">Stack Overflow</a>
      </footer>
    </main>
  </body>
</html>

它在 Chrome 和 Safari 中非常完美，我滚动到页脚并按预期单击 link :

Video screen capture in Chrome

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

Video screen capture in Chrome

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

你有什么想法可以让我点击页脚中的 link 吗？

Answer 1

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

CSS 属性 scroll-snap-type 阻止点击 Firefox

CSS property scroll-snap-type prevent click with Firefox

html

css

firefox

click

scroll-snap-type