Scroll the container down!
<ul>
  <li style="background-color: red">1</li>
  <li style="background-color: blue">2</li>
  <li style="background-color: green">3</li>
  <li style="background-color: orange">4</li>
  <li style="background-color: yellow">5</li>
  <li style="background-color: purple">6</li>
  <li style="background-color: gold">7</li>
</ul>
ul {
  padding: 0;
  height: 200px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

li {
  list-style: none;
  height: 200px;
  scroll-snap-align: start;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.