Reference

https://codepen.io/argyleink/pen/poLWYQz

<!-- 
Add position: sticky to each slide for a neat effect!

slide: https://oh-snap.netlify.app/#sticky-starter-kit
-->

<section>
  <h1>slide 1</h1>
</section>
<section>
  <h1>slide 2</h1>
</section>
<section>
  <h1>slide 3</h1>
</section>
<section>
  <h1>slide 4</h1>
</section>
<section>
  <h1>slide 5</h1>
</section>

@layer demosupport, demo;

@layer demo {
  html {
    scroll-snap-type: y mandatory;
  }
  
  section {
    scroll-snap-align: start;
    min-block-size: 100vh;
    scroll-snap-stop: always;
    position: sticky;
    top: 0;
  }
}

@layer demosupport {
  section {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  section:nth-of-type(even) {
    color: hsl(320 80% 90%);
    background: hsl(320 80% 40%);
  }

  section:nth-of-type(odd) {
    color: hsl(290 80% 90%);
    background: hsl(290 80% 40%);
  }

  body {
    margin: 0;
    font-family: system-ui, sans-serif;
    font-size: 4rem;
  }
}