DEV Community

loading...

[CSS] Scroll snap example

Cornea Florin
Experienced Web Developer with a demonstrated history of working with PHP, HTML, CSS, JS and many more
・1 min read

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

Discussion (0)