<h1>Scroll Snap Demo</h1>
<div id="main-container">
  <div class="page" id="page1"><h3>Page 1</h3></div>
  <div class="page" id="page2"><h3>Page 2</h3></div>
  <div class="page" id="page3"><h3>Page 3</h3></div>
  <div class="page" id="page4"><h3>Page 4</h3></div>
</div>

body {
  overflow: hidden;
}

#main-container {
  scroll-snap-type: y mandatory;
  height: 100vh;
  overflow: scroll;
}

.page {
  height: 400px;
  scroll-snap-align: start;
}

#page1 {
  background-color: red
}

#page2 {
   background-color: orange
}

#page3 {
   background-color: yellow;
}

#page4 {
  background-color: green;
}