Edit in JSFiddle

#container {
  width: 300px;
  height: 200px;
  border: 1px solid #000;
  overflow: auto;
  scroll-snap-type: mandatory;
	-webkit-overflow-scrolling: touch;
	-webkit-scroll-snap-type: mandatory;
	-ms-scroll-snap-type: mandatory;
}
.item {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 5em;
  -webkit-scroll-snap-coordinate: 0 0;
	-ms-scroll-snap-coordinate: 0 0;
	scroll-snap-coordinate: 0 0;
}
.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>