CSS 仅当全屏视口滚动到时滚动捕捉

Question

I've successfully implemented the CSS scroll snap. However, I only applied it to some sections in the middle of my page. When you start scrolling from the top and a bit of the snapping sections already show, when you continue scrolling, the snapping already begins.

Is there a way for the scroll snap to begin only when the first section occupies the entire viewport? And the last, when you scroll from the bottom?

Thank you!

The code I've tried is below:

<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

I think this is what you are looking for.

 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>