<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
This Pen doesn't use any external CSS resources.