Scroll snap example for presentation websites
Let's start with a simple HTML structure:
<div class="section-wrapper">
<section class="page-one">
<p>Scroll dowb just a little bit</p>
</section>
<section class="page-two">
<p>A bit more</p>
</section>
<section class="page-three">
<p>And more</p>
</section>
<section class="page-four">
<p>Now scroll up</p>
</section>
</div>
Now for the css scroll snap part:
.section-wrapper {
scroll-snap-type: y mandatory;
height: 100vh;
overflow: auto;
}
section {
height: 100vh;
scroll-snap-align: start;
transition: scroll-snap-align 2s;
}
We need to add `scroll-snap-align` with the individual sections and the `scroll-snap-type` to the element that contains all the sections
Looking forward to see other examples that you might have
Top comments (0)