CSS滚动捕获仅当全屏viewport滚动到

Question

我已经成功地实现了CSS滚动条。但是，我只将它应用于页面中间的一些部分。当你从顶部开始滚动时，已经显示了一些抓取部分，当你继续滚动时，抓取已经开始了。

是否有一种方法，滚动快照开始只有当第一部分占用整个视口?最后，当你从底部滚动时?

谢谢!

我试过的代码如下:

<div class="sticky-container">
<div class="sticky-section">
<h1>Slide One</h1>
</div>
<div class="sticky-section">
<h1>Slide Two</h1>
</div>
<div class="sticky-section">
<h1>Slide Three</h1>
</div>
</div>

.sticky-container {
height: 100%;
width: 100%;
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.sticky-section {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
scroll-snap-align: start;
}

Answer 1

我想这就是你要找的。

body {
margin: 0;
}
.sticky-container {
height: 100vh;
width: 100vw;
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.sticky-section {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
scroll-snap-align: start;
}

<div class="sticky-container">
<div class="sticky-section">
<h1>Slide One</h1>
</div>
<div class="sticky-section">
<h1>Slide Two</h1>
</div>
<div class="sticky-section">
<h1>Slide Three</h1>
</div>
</div>