JSFiddle - React, Tailwind, and code Playground

by CypressKuo

HTML

<h1>scroll snap example</h1>
<article class="scroller scroll-type-mandatory">
    <section class="scroll-align-start">
        <h2>Section one</h2>
    </section>
    <section class="scroll-align-start">
        <h2>Section two</h2>
    </section>
    <section class="scroll-align-start">
        <h2>Section three</h2>
    </section>
</article>

CSS

.scroll-type-mandatory {
    scroll-snap-type: y mandatory;
}

.scroll-align-start {
    scroll-snap-align: start;
}

.scroller {
    width: 300px;
    height: 300px;
    border: 4px solid #333;
    overflow-y: scroll;
}

.scroller section {
    min-height: 100%;
    padding: 10px;
}

.scroller section:nth-child(2n+1) {
    background-color: #ccc;
}