滚动夹紧问题

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>