[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>

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;
}