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

Posted 2023-03-04

技术标签:

【中文标题】CSS 属性 scroll-snap-type 防止点击 Firefox【英文标题】：CSS property scroll-snap-type prevent click with 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://***.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 的页脚。

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

【问题讨论】：

【参考方案1】：

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

【讨论】：

以上是关于CSS 属性 scroll-snap-type 防止点击 Firefox的主要内容，如果未能解决你的问题，请参考以下文章

web前端入门到实战：CSS 滚动捕捉技术（Scroll Snapping）