<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</section>
section {
  scroll-snap-type: y mandatory;
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  flex: none;
  overflow: auto;
  width: 100%;
  height: 150px;
  overflow-x: hidden;
}

div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
  line-height: 150px;
  font-size: 64px;
  width: 100%;
  height: 150px;
}

div:nth-child(2n) {
  background: rebeccapurple;
  color: white;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.