Bearbeiten von „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.

<pre>
/* 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;
</pre>

Beispiel


Beispiel 2
<syntaxhighlight lang="html5">
<article class="scroller">
    <section>
        <h2>Section one</h2>
    </section>
    <section>
        <h2>Section two</h2>
    </section>
    <section>
        <h2>Section three</h2>
    </section>
</article>
    
</syntaxhighlight>

<syntaxhighlight lang="css">
<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>
</syntaxhighlight>

<syntaxhighlight lang="css">
* {
  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;
}
</syntaxhighlight>

== 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.