<div class="container">
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
</div>
/* defaults */
html {
  font-size: 15px;
  font-family: "Segoe UI",SegoeUI,"Helvetica Neue",Helvetica,Arial,"sans-serif";
}
body {
  margin: 1rem;
}
p {
  margin: 0;
}

.item {
  padding: 1rem;  
  height: 50%;
}
.item:nth-child(1) {
  background-color: hsl(120, 50%, 90%);
}
.item:nth-child(2) {
  background-color: hsl(0, 50%, 90%);
}
.item:nth-child(3) {
  background-color: hsl(240, 50%, 90%);
}
.item + .item {
  margin-top: 1rem;
}

/* Scroll-Snap */
.container {
  height: 140px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.item {
  scroll-snap-align: start;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.