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

Question

我想创建一个网站。有多个部分，宽度为 100vw，高度为 100vh。我还想要这些部分的强制 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 文档会使此功能在浏览器之间看起来高度不一致，但按照他们的指南，我设法使您的代码段与这些更改一起工作：

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>