Scroll-Snap

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts
https://css-tricks.com/practical-css-scroll-snapping/

https://stackoverflow.com/questions/53981699/pure-css-scroll-snap-only-works-with-the-body-as-the-container

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

scroll-padding

Scroll-Padding setzt man im Container. Damit kann man erreichen, dass ein Element nicht direkt an den Rand schnappt, sondern kurz davor stoppt. Das ist z.B. bei einem fixed Header nützlich, der ansonsten den Inhalt überlappen würde.

scroll-margin

Ähnlicher Effekt wie bei Padding. Da man den scroll-margin im Kindelement setzt, kann man für jedes Element unterschiedliche Werte setzen.