DEV Community

Cornea Florin
Cornea Florin

Posted on

[CSS] Scroll snap example

#codepen #css #html #ui

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>
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

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)