Section one
Section two
Section three
.scroller { height: 300px; overflow-y: scroll; scroll-snap-points-y: repeat(320px); scroll-snap-destination: 0 0; scroll-snap-type: y mandatory; scroll-snap-type: mandatory; } .scroller section { scroll-snap-align: start; }
<article class="scroller"> <section> <h2>Section one</h2> </section> <section> <h2>Section two</h2> </section> <section> <h2>Section three</h2> </section> </article>