<div class="container">
  <div class="parent">
    <div class="title">Regular Scroll</div>
    <div class="child teal">
      One
    </div>
    <div class="child coral">
      Step
    </div>
    <div class="child purple">
      At
    </div>
    <div class="child blue">
      A
    </div>
    <div class="child red">
      Time
    </div>
  </div>
  <div class="parent mandatory">
    <div class="title">scroll-snap-type: mandatory</div>
    <div class="child teal">
      One
    </div>
    <div class="child coral">
      Step
    </div>
    <div class="child purple">
      At
    </div>
    <div class="child blue">
      A
    </div>
    <div class="child red">
      Time
    </div>
  </div>

  <div class="parent proximity">
    <div class="title">scroll-snap-type: proximity</div>
    <div class="child teal">
      One
    </div>
    <div class="child coral">
      Step
    </div>
    <div class="child purple">
      At
    </div>
    <div class="child blue">
      A
    </div>
    <div class="child red">
      Time
    </div>
  </div>  
</div>

html {
  overflow: hidden;
}
body {
  margin: 0;
}

.container {
  display: flex;
}

.parent {  
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}
.parent.mandatory {
  scroll-snap-type: y mandatory;
}
.parent.proximity {
  scroll-snap-type: y proximity;
}

.title {
  position: fixed;
  text-align: center;
  width: 33%;
  color: white;
  top: 25px;
}

.child {
  scroll-snap-align: start;
  height: 100%;
  
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: white;
}

.child.teal {
  background: teal;
}
.child.coral {
  background: coral;
}
.child.purple {
  background: blueviolet;
}
.child.blue {
  background: darkslateblue;
}
.child.red {
  background: indianred;
}