CSS 滚动 - 卡入到位？

Question

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

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #container {
                scroll-snap-type: y mandatory;
            }
            .tile {
                height:100vh;
                width:100vw;
                scroll-snap-align: start;
            }
        </style>
    </head>
    <body>
    <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>
    </body>
</html>

然而一切仍然自由滚动。我哪里错了？谢谢！

Answer 1

在 MDN 的所有示例中，我看到使用滚动捕捉的父元素始终具有定义的高度和您使用的方向的溢出，在您的情况下 y => overflow-y: scroll;。没有定义的高度，在我的测试中，捕捉将不起作用。

现在，由于正文具有默认滚动，因此必须在 css 中为正文定义高度。

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

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

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

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <style>

  </style>
</head>

<body>
  <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>
</body>

</html>

CSS 滚动 - 卡入到位？

CSS Scrolling - snap into place?

html

css

vertical-scrolling