Scroll-Snap

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts

Scroll Snap Basics

Die wichtigsten Eigenschaften sind

scroll-snap-type (Containerelement)
scroll-snap-align (Kindelement)

Die Eigenschaft scoll-snap-type wird auf das Elternelement angewendet und scroll-snap-align auf das Kindelement.

Beispiel

<article class="scroller">
    <section>
        <h2>Section one</h2>
    </section>
    <section>
        <h2>Section two</h2>
    </section>
    <section>
        <h2>Section three</h2>
    </section>
</article>

.scroller {
    height: 300px;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

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

body {
  margin: 0;
  scroll-snap-type: y mandatory; /* Vertikal Scrollen und Snap Points streng einhalten */
}

section {
  height: 100vh;
  scroll-snap-align: start; /* An der Oberkante jeder Sektion soll gestoppt werden */
}

section:nth-of-type(even) {
  background: #8cb11c;
}

section:nth-of-type(odd) {
  background: #147c85;
}