<div class="wrap">
	<ul>
		<li>Scroll</li>
		<li>Scroll</li>
		<li>Scroll</li>
		<li>Scroll</li>
		<li>Scroll</li>
		<li>Scroll</li>
		<li>Scroll</li>
		<li>Scroll</li>
	</ul>
</div>
* {
	box-sizing: border-box;
}

.wrap {
	font-family: "Tahoma";
	max-height: 100vh;
	overflow-y: scroll;
	border: 1px solid gray;
	scroll-snap-type: y mandatory;
}
li:nth-child(odd){
	background:#03A9F4;
}
li {
    background: #FF5722;
    height: 100vh;
    text-align: center;
    font-size: 3em;
    justify-content: center;
    display: flex;
    color: #F5F5F5;
    flex-direction: column;
    scroll-snap-align: center;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.5.2/randomColor.js
  2. https://bundle.run/css-scroll-snap-polyfill@0.1.2