在网站上滚动在部分之间切换

Question

我一直在尝试实现改变槽部分的滚动效果 - 不是正常向下或向上移动，而是在元素之间“跳跃”。

举个例子：

<main>
   <section id="s1">
      ... some content
   </section>
   <section id="s2">
      ... some content
   </section>
   <section id="s3">
      ... some content
   </section>
</main>

因此，如果我向下滚动，“s1”部分将更改为“s2”，然后“s2”将更改为“s3”，依此类推。 我应该补充一下，每个部分的高度都相同100vh，我通常使用 flexbox

html {
   scroll-behavior: smooth;
}

section {
   width: 100vw;
   height: 100vh;
}

如果有人知道如何解决这个问题，我将不胜感激

Answer 1

听起来你正在尝试实现滚动捕捉的效果。

你的 css 需要这样的东西：

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

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

或者，如果您希望滚动捕捉在页面上。

html {
  scroll-snap-type: y mandatory;
}

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

您可以修改更多选项，您可以很好地了解它的工作原理here。