CSS 滚动 - 卡入到位？

Question

我正在尝试使用 CSS 为网站实现垂直对齐滚动，但无法使其正常工作。为了隔离问题，我创建了这个玩具示例：

#container {
  scroll-snap-type: y mandatory;
}

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

<div id="container">
  <div class="tile" style="background-color:red;">
  </div>
  <div class="tile" style="background-color:blue;">
  </div>
  <div class="tile" style="background-color:green;">
  </div>
  <div class="tile" style="background-color:yellow;">
  </div>
</div>

但是一切仍然可以自由滚动。我哪里错了？谢谢！

Answer 1

在 MDN 的所有示例中，我看到使用滚动捕捉父元素始终具有定义的高度和您正在使用的方向的溢出，在您的情况下

y

=>

overflow-y: scroll;

。如果没有定义的高度，在我的测试中，捕捉将不起作用。

现在，由于 body 具有默认滚动功能，因此必须在 body 的 css 中定义高度。

html,
body {
  height: 100vh;
  overflow: hidden;
}

#container {
  overflow: scroll;
  height: 100vh;
  scroll-snap-type: y mandatory;
}

#container div {
  height: 100vh;
  scroll-snap-align: start;
}

<div id="container" style="">
  <div class="tile" style="background-color:red;">
  </div>
  <div class="tile" style="background-color:blue;">
  </div>
  <div class="tile" style="background-color:green;">
  </div>
  <div class="tile" style="background-color:yellow;">
  </div>
</div>