在網站上滾動可在各部分之間切換

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

還有一些您可以修改的選項，您可以在這里很好地了解它是如何工作的。