Grundlegende Konzepte des Scroll Snap

Bevor Sie Scroll-Snapping definieren können, müssen Sie den Bildlauf auf einem Scroll-Container aktivieren. Dies können Sie erreichen, indem Sie sicherstellen, dass der Scroll-Container eine definierte Größe hat und dass overflow aktiviert ist.

Anschließend können Sie Scroll-Snapping im Scroll-Container mithilfe der folgenden zwei Schlüsseleigenschaften definieren:

• scroll-snap-type: Mit dieser Eigenschaft können Sie festlegen, ob der scrollbare Ansichtsbereich einrastbar ist, ob das Einrasten erforderlich oder optional ist und auf welcher Achse das Einrasten erfolgen soll.
• scroll-snap-align: Diese Eigenschaft wird für jedes Kind des Scroll-Containers festgelegt und Sie können sie verwenden, um die Einrastposition jedes Kindes zu definieren oder deren Fehlen.
• scroll-snap-stop: Diese Eigenschaft stellt sicher, dass ein Kind während des Scrollens einrastet und nicht übersprungen wird.
• scroll-margin: Diese Eigenschaft kann an Kind-Elementen gesetzt werden, die während des Scrollens einrasten, um einen Vorsprung vom definierten Box zu erstellen.
• scroll-padding: Diese Eigenschaft kann am Scroll-Container gesetzt werden, um einen Einrastversatz zu erstellen.

Das folgende Beispiel demonstriert das Scroll-Snapping entlang der vertikalen Achse, die durch scroll-snap-type definiert wird. Zusätzlich wird scroll-snap-align auf alle Kinder des <section>-Elements angewendet und bestimmt den Punkt, an dem das Scrollen jedes Kindes stoppen soll.

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

body {
  font: 1.2em / 1.5 sans-serif;
}

.scroller {
  border: 4px solid #333;
  width: 300px;
}

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

.scroller section:nth-child(odd) {
  background-color: #ccc;
}

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

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

Die Eigenschaft scroll-snap-type muss die Achse wissen, entlang derer das Scroll-Snapping erfolgt. Dies kann x, y oder die logischen Zuordnungen block oder inline sein. Sie können auch das Keyword both verwenden, um das Scroll-Snapping entlang beider Achsen zu aktivieren.

Sie können auch die Keywords mandatory oder proximity übergeben. Das Keyword mandatory weist den Browser an, dass der Inhalt muss an einem bestimmten Punkt einrasten, egal wo sich das Scrollen befindet. Das Keyword proximity bedeutet, dass der Inhalt möglicherweise an dem Punkt einrastet, aber nicht zwingend muss.

Die Verwendung von mandatory schafft ein sehr konsistentes Scroll-Erlebnis — Sie wissen, dass der Browser immer an jedem definierten Punkt einrastet. Das bedeutet, dass Sie sicher sein können, dass etwas, das Sie an der Spitze des Bildschirms erwarten, dort sein wird, wenn das Scrollen beendet ist. Dies kann jedoch problematisch sein, wenn der Inhalt größer ist als erwartet — Benutzer könnten sich in der frustrierenden Lage befinden, nie in der Lage zu sein, einen bestimmten Punkt im Inhalt zu scrollen und anzuzeigen. Daher sollte die Verwendung von mandatory sorgfältig abgewogen und nur in Situationen verwendet werden, in denen Sie wissen, wie viel Inhalt sich auf dem Bildschirm oder im scrollbaren Bereich befindet.

Der proximity-Wert lässt Kind-Elemente nur dann an eine Position einrasten, wenn sie sich in der Nähe befinden, wobei die Browser den genauen Abstand bestimmen. Klicken Sie auf "Abspielen", um das folgende Beispiel im MDN Playground zu bearbeiten. Wechseln Sie den scroll-snap-type-Wert zwischen mandatory und proximity, um zu sehen, wie sich dies auf das Scroll-Erlebnis auswirkt.

<article class="scroller">
  <section>
    <h2>Section one</h2>
    <p>
      Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
      kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
      winter purslane kale. Celery potato scallion desert raisin horseradish
      spinach carrot soko.
    </p>
  </section>
  <section>
    <h2>Section two</h2>
    <p>
      Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
      kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
      winter purslane kale. Celery potato scallion desert raisin horseradish
      spinach carrot soko.
    </p>
  </section>
  <section>
    <h2>Section three</h2>
    <p>
      Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
      kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
      winter purslane kale. Celery potato scallion desert raisin horseradish
      spinach carrot soko.
    </p>
  </section>
</article>

body {
  font: 1.2em / 1.5 sans-serif;
}

.scroller {
  border: 4px solid #333;
  width: 300px;
}

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

.scroller section:nth-child(odd) {
  background-color: #ccc;
}

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

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

Im obigen Beispiel sind sowohl height: 300px; als auch overflow-y: scroll; auf dem Scroll-Container eingestellt. Wenn der Inhalt nicht über seinen Container hinausgeht, gibt es nichts, was gescrollt werden kann.

Die gültigen Werte für die Eigenschaft scroll-snap-align umfassen start, end, center und none. Diese Werte werden verwendet, um den Punkt im Scroll-Container anzugeben, an dem der Inhalt einrasten soll. Klicken Sie auf "Abspielen" im Beispiel unten und ändern Sie den Wert von scroll-snap-align, um zu sehen, wie sich dies auf das Scroll-Verhalten auswirkt.

<article class="scroller">
  <section>
    <h2>Section one</h2>
    <p>
      Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
      kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
      winter purslane kale. Celery potato scallion desert raisin horseradish
      spinach carrot soko.
    </p>
  </section>
  <section>
    <h2>Section two</h2>
    <p>
      Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
      kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
      winter purslane kale. Celery potato scallion desert raisin horseradish
      spinach carrot soko.
    </p>
  </section>
  <section>
    <h2>Section three</h2>
    <p>
      Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
      kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
      winter purslane kale. Celery potato scallion desert raisin horseradish
      spinach carrot soko.
    </p>
  </section>
</article>

body {
  font: 1.2em / 1.5 sans-serif;
}

.scroller {
  border: 4px solid #333;
  width: 300px;
}

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

.scroller section:nth-child(odd) {
  background-color: #ccc;
}

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

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

Wenn scroll-snap-type mandatory ist und scroll-snap-align bei einem Kind entweder auf none gesetzt oder nicht gesetzt ist (in welchem Fall es standardmäßig auf none eingestellt ist), kann der Benutzer dieses Element nicht in den Ansichtsbereich scrollen.

Wenn Sie start oder end verwenden und nicht möchten, dass der Inhalt direkt an die Kante des Scroll-Containers einrastet, oder wenn Sie möchten, dass die Einrastposition leicht vom Zentrum versetzt ist, wenn Sie center verwenden, verwenden Sie die Eigenschaft scroll-padding oder deren entsprechende Einzelwerte, um etwas Abstände hinzuzufügen.

Im Beispiel unten wird scroll-padding auf 50px gesetzt. Wenn der Inhalt an den Anfang des zweiten und dritten Abschnitts einrastet, stoppt das Scrollen 50 Pixel vom Anfang des Abschnitts entfernt. Versuchen Sie, den scroll-padding-Wert zu ändern, um zu sehen, wie sich dies auf die Entfernung auswirkt.

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

body {
  font: 1.2em / 1.5 sans-serif;
}

.scroller {
  border: 4px solid #333;
  width: 300px;
}

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

.scroller section:nth-child(odd) {
  background-color: #ccc;
}

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

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

Dies ist potenziell nützlich, wenn Sie ein festes Element wie eine Navigationsleiste haben, das dazu führen könnte, dass gescrollte Inhalte überlappen. Mit scroll-padding können Sie Platz für das feste Element reservieren, wie im Beispiel unten gezeigt, wo das <h1>-Element auf dem Bildschirm bleibt, während der Inhalt darunter scrollt. Ohne Padding würde die Überschrift einige der Inhalte überlappen, wenn das Einrasten erfolgt.

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

body {
  font: 1.2em / 1.5 sans-serif;
}

.scroller {
  border: 4px solid #333;
  width: 300px;
}

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

.scroller section:nth-child(odd) {
  background-color: #ccc;
}

.scroller h1 {
  position: sticky;
  top: 0;
  min-height: 40px;
  background-color: #000;
  color: #fff;
  margin: 0;
  padding: 0;
}

.scroller h2 {
  margin: 0;
  padding: 0;
}

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

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

Die Eigenschaft scroll-margin oder die Einzelwerte der Scroll-Marge können an Kind-Elementen gesetzt werden und definieren einen Vorsprung vom definierten Box. Dies ermöglicht unterschiedliche Abstände für verschiedene Kind-Elemente und kann in Verbindung mit scroll-padding am übergeordneten Element verwendet werden.

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

body {
  font: 1.2em / 1.5 sans-serif;
}

.scroller {
  border: 4px solid #333;
  width: 300px;
}

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

.scroller section:nth-child(odd) {
  background-color: #ccc;
}

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

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

Mit der Eigenschaft scroll-snap-stop können Sie festlegen, ob das Scrollen an den definierten Einrastpunkten stoppen muss. In den obigen Beispielen würde dies bedeuten, dass das Scrollen am Anfang jedes Abschnitts stoppt oder Abschnitte übersprungen werden können.

Mit dieser Eigenschaftsdefinition können Sie sicherstellen, dass Benutzer jeden Abschnitt des Scrollers sehen und nicht versehentlich daran vorbeiscrollen. Dieses Setting kann jedoch auch negative Auswirkungen auf die Benutzererfahrung haben, indem es verhindert, dass der Benutzer schnell zu dem gewünschten Inhalt scrollt.

• CSS scroll snap-Modul
• Gut gesteuertes Scrollen mit CSS scroll snap auf web.dev (2021)
• Praktisches CSS-Scroll-Snapping auf CSS-Tricks (2020)
• CSS scroll snap auf 12 Days of Web (2019)
• Scroll Snap Beispiele auf CodePen