Edit in JSFiddle

#container {
  width: 300px;
  height: 200px;
  border: 1px solid #000;
  overflow: auto;
  scroll-snap-type: y mandatory;
}
.item {
  display: flex;
  height: 150%;
  align-items: center;
  justify-content: center;
  font-size: 5em;
  scroll-snap-align: center;
}
.item:nth-child(3n+1) {
  background: #fff6be;
}
.item:nth-child(3n+2) {
  background: #ffa1ac;
}
.item:nth-child(3n) {
  background: #cbbcf6;
}
<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>