html - 滚动捕捉问题

Question

我正在创建一个登录页面，其中顶部具有正常滚动，然后是启用滚动捕捉的容器，然后是正常滚动容器。但是当我启用滚动捕捉时，我无法移出中间容器。我看不到上半部分，也看不到下半部分。

这是启用滚动捕捉的容器

.scrollcontainer {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}

.scrollcontainer section {
  height: 100vh;
  scroll-snap-align: start;
}

<div class="scrollcontainer">
  <section class="firstpiece">
    <h1>First page</h1>
  </section>
  <section class="secondpiece">
    <h1>Second page</h1>
  </section>
  <section class="thirdpiece">
    <h1>Third page</h1>
  </section>
</div>

我究竟做错了什么？

Answer 1

尝试这个：

html {
    scroll-snap-type: y mandatory;
}


section {
  border-bottom: 1px solid black;
    height: 100vh;
    scroll-snap-align: start;
}

<section class="firstpiece">
    <h1>First page</h1>
  </section>
  <section class="secondpiece">
    <h1>Second page</h1>
  </section>
  <section class="thirdpiece">
    <h1>Third page</h1>
  </section>