<div class="wrapper y-scroll-snap">
  <div>Spread</div>
  <div>Love</div>
  <div>Not</div>
  <div>Hate</div>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.wrapper {
  display: flex;
  overflow: auto;
  flex: none;
  width: 80vw;
  height: 80vh;
  flex-flow: column nowrap;
}

.y-scroll-snap {
    scroll-snap-type: y mandatory;

}

.wrapper > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
   line-height: 3;
  font-size: 128px;
  width: 100%;
  height: 100%;
}

.wrapper > div:nth-child(even) {
  background-color: lightsalmon;
}

.wrapper > div:nth-child(odd) {
  background-color: lightpink;
}