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.

/* Keyword values */
scroll-snap-type: none;
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/* Optional mandatory | proximity*/
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

/* etc */

/* Global values */
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: unset;

Beispiel

Beispiel 2

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

<section><h2>SCROLL ME</h2><p>horizontal</p></section>
<section><h2>SNAPPED</h2></section>
<section><h2>GO ON</h2></section>
<section><h2>THIS IS THE END</h2></section>

* {
  box-sizing: border-box;
}
body,html{
  text-align: center;
  min-height: 100%;
  margin: 0;
  padding: 0;
  color: white;
  font-family: sans-serif;
}
html {
  margin: 0;
  scroll-snap-type: x mandatory;  
}
body{
  /*
  NOT working
  scroll-snap-type: y mandatory;
  */
  display:flex;
}
h2{
  text-align: center;
}
section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  width: 100%;
  flex-shrink: 0;
  scroll-snap-align: start; /* Stop at the left */
  
  background: #146585;
}

section:nth-of-type(even) {
  background: #2b8664;
}

scroll-padding und scroll-margin

Hiermit lassen sich die Scrollpunkte justieren, wenn man z.B. einen fest positionierten Header hat, oder mit Abständen zwischen den Elementen hat. scroll-padding-topscroll-margin-top