<div class="scroll-wrapper">
  <div class="scroll-section section1">
    <h2>Section 1</h2>
  </div>
  <div class="scroll-section section2">
    <h2>Section 2</h2>
  </div>
  <div class="scroll-section section3">
    <h2>Section 3</h2>
  </div>
</div>

* {
  margin: 0;
}
.scroll-wrapper {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}
.scroll-section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}
h2 {
  font-size: 50px;
  text-transform: uppercase;
  font-family: sans-serif;
}
.section1 {
  background-color: orange;
}
.section2 {
  background-color: purple;
}
.section3 {
  background-color: cyan;
}