如何正确设置垂直滚动捕捉 css

Question

我想创建一个网站。具有多个宽度为 100vw 且高度为 100vh.I 的部分还需要对这些部分进行强制性 y（垂直）对齐。我已经检查了很多教程，但我的代码似乎不起作用。非常感谢任何帮助。

当前代码

body {
  width: 100%;
  margin: 0;
  background-color: white;
}

body .content {
  width: 100vw;
  height: 100%;
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(300px);
  scroll-snap-type: y mandatory;
}

body .content section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  border: 1px solid black;
  scroll-snap-align: start;
}

<div class='content'>
  <section>1</section>
  <section>2</section>
  <section>3</section>
  <section>4</section>
</div>

Answer 1

仅阅读 Mozilla docs 就可以看出此功能在浏览器之间高度不一致，但按照他们的指南，我设法使您的代码片段适用于这些更改：

body .content {
  height: 100vh; /* was 100% */
  overflow: auto; /* added */
}

body {
  width: 100%;
  margin: 0;
  background-color: white;
}

body .content {
  width: 100vw;
  height: 100vh;
  scroll-snap-points-y: repeat(300px);
  scroll-snap-type: y mandatory;
  scroll-snap-type: mandatory;
  overflow: auto;
}

body .content section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  border: 1px solid black;
  scroll-snap-align: start;
}

<div class='content'>
  <section>1</section>
  <section>2</section>
  <section>3</section>
  <section>4</section>
</div>

如何正确设置垂直滚动捕捉 css

How to correctly setup Vertical scroll snap css

html

css

snap