<div class="section-wrapper">
  <section class="page-one">
    <p>Scroll down 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>

.section-wrapper {
  scroll-snap-type: y mandatory;
  height: 100vh;
  overflow: auto;
}

section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  color: #fff;
  scroll-snap-align: start;
  transition: scroll-snap-align 2s;
}

.page-one {
  background-image: linear-gradient(-140deg , #3f5efb, #fc466b);
}

.page-two {
  background-image: linear-gradient(-140deg , #ffff1c, #00c3ff);
}

.page-three {
  background-image: linear-gradient(-140deg , #feb47b, #ff7e5f);
}

.page-four {
  background-image: linear-gradient(-140deg , #89fffd, #ef32d9);
}

body {
  margin: 0;
  padding: 0;
}