使平滑的锚标签滚动与滚动捕捉兼容

Question

我正在使用：

html {
    scroll-behavior: smooth;
}

启用平滑滚动到 html 锚标记。我还在 css 中使用 scroll-snap-type 和 scroll-snap-align 启用垂直滚动捕捉，如下面的代码所示。问题是我无法让这两种行为都起作用。要启用滚动捕捉，我需要在包含 div 上设置一个高度。这似乎禁用了平滑滚动到 html 锚标记。您可以在下面的 sn-p 中全屏进行试验。如果您在下面的 sn-p 中删除 height: 100vh;，页面将平滑滚动到锚点，但不会滚动捕捉。如果包含它，页面将滚动快照，但会跳转到锚点而不是平滑滚动。

    html {
        scroll-behavior: smooth;
    }

    main {
        height: 100vh;
        overflow: scroll;
        scroll-snap-type: y mandatory;
    }

    section {
        height: 400px;
        scroll-snap-align: start;
    }

    nav {
        position: fixed;
        top: 0;
        color: white;
        width: 100%;
    }

    li {
        display: inline-block;
        list-style-type: none;
    }

    a:visited {
        color: white;
    }

    .one {
        background-color: red;
    }

    .two {
        background-color: blue;
    }

    .three {
        background-color: grey;
    }

    .four {
        background-color: green;
    }

    <nav>
        <ul>
            <li><a href="#section-2">section 2</a></li>
            <li><a href="#section-3">section 3</a></li>
            <li><a href="#section-4">section 4</a></li>
        </ul>
    </nav>

    <main>
        <section id="section-1" class="one">
        </section>
        <section id="section-2" class="two">
        </section>
        <section id="section-3" class="three">
        </section>
        <section id="section-4" class="four">
        </section>
    </main>

Answer 1

你能检查下面的代码吗？希望它对你有用。如果您想在不使用 JS 的情况下平滑滚动到 HTML 锚标记，则可以使用 scroll-snap-type、scroll behavior 和 scroll-snap-align CSS 属性来实现。

请参考此链接：https://jsfiddle.net/yudizsolutions/seogca34/1/

main {
  height: 100vh;
  overflow: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

section {
  height: 100vh;
  scroll-snap-align: start;
}

nav {
  position: fixed;
  top: 0;
  color: white;
  width: 100%;
}

li {
  display: inline-block;
  list-style-type: none;
}

a:visited {
  color: white;
}

.one {
  background-color: red;
}

.two {
  background-color: blue;
}

.three {
  background-color: grey;
}

.four {
  background-color: green;
}

<nav>
  <ul>
    <li><a href="#section-2">section 2</a></li>
    <li><a href="#section-3">section 3</a></li>
    <li><a href="#section-4">section 4</a></li>
  </ul>
</nav>

<main>
  <section id="section-1" class="one">
  </section>
  <section id="section-2" class="two">
  </section>
  <section id="section-3" class="three">
  </section>
  <section id="section-4" class="four">
  </section>
</main>

Answer 2

单击a 标签时，我使用jquery 进行平滑滚动。& 从您的代码中删除一些css。 也许这会有所帮助

$('nav ul li  a[href^="#"]').on('click', function(event) {
        
      var target = $(this.getAttribute('href'));
      if( target.length ) {
      event.preventDefault();
      $('html, body').stop().animate({
      scrollTop: target.offset().top-80
      }, 1500);
      }
  });

  
  
    main {
        height: 100vh;
    }

    section {
        height: 400px;
    }

    nav {
        position: fixed;
        top: 0;
        color: white;
        width: 100%;
    }

    li {
        display: inline-block;
        list-style-type: none;
    }

    a:visited {
        color: white;
    }

    .one {
        background-color: red;
    }

    .two {
        background-color: blue;
    }

    .three {
        background-color: grey;
    }

    .four {
        background-color: green;
    } 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
        <ul>
            <li><a href="#section-2">section 2</a></li>
            <li><a href="#section-3">section 3</a></li>
            <li><a href="#section-4">section 4</a></li>
        </ul>
    </nav>

    <main>
        <section id="section-1" class="one">
        </section>
        <section id="section-2" class="two">
        </section>
        <section id="section-3" class="three">
        </section>
        <section id="section-4" class="four">
        </section>
    </main>