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

Question

我在用：

html {
    scroll-behavior: smooth;
}

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

html {
    scroll-behavior: smooth;
}

    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;
    }

Answer 1

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

请参考此链接：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>