Grundkonzepte des Scroll Snap

Die Eigenschaften im Modul CSS scroll snap ermöglichen es Ihnen, festzulegen, wie das Scrollen zu bestimmten Punkten schnappt, während ein Benutzer durch ein Dokument scrollt.

Die Scroll Snap-Funktion ermöglicht es Ihnen, die Snap-Positionen zu definieren, an denen das Scroll-Container-Viewport nach Abschluss eines Scrollvorgangs enden oder "schnappen" kann.

Wichtige Eigenschaften für CSS Scroll Snap

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

Sie können dann das Scroll Snapping auf dem Scroll Container mit den folgenden zwei Haupteigenschaften definieren:

scroll-snap-type: Mit dieser Eigenschaft können Sie definieren, ob das scrollbare Viewport gesnappt werden kann, ob das Snapping erforderlich oder optional ist und auf welcher Achse das Snapping erfolgen soll.
scroll-snap-align: Diese Eigenschaft wird auf jedes Kind des Scroll Containers gesetzt, und Sie können sie verwenden, um die Snap-Position jedes Kindes oder deren Fehlen zu definieren.
scroll-snap-stop: Diese Eigenschaft sorgt dafür, dass ein Kind während des Scrollens gesnappt wird und nicht übersprungen wird.
scroll-margin: Diese Eigenschaft kann auf Kindelemente gesetzt werden, die während des Scrollens gesnappt werden, um einen Versatz vom definierten Kasten zu erzeugen.
scroll-padding: Diese Eigenschaft kann auf den Scroll Container gesetzt werden, um einen Snapping-Offset zu erzeugen.

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

html

<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 #333333;
  width: 300px;
}

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

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

css

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

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

Verwendung von scroll-snap-type

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

Sie können auch die Schlüsselwörter mandatory oder proximity verwenden. Das Schlüsselwort mandatory teilt dem Browser mit, dass der Inhalt unbedingt an einem bestimmten Punkt schnappen muss, egal wo sich das Scroll befindet. Das Schlüsselwort proximity bedeutet, dass der Inhalt möglicherweise an den Punkt snappen kann, aber nicht muss.

Die Verwendung von mandatory schafft ein sehr konsistentes Scroll-Erlebnis — Sie wissen, dass der Browser immer an jedem definierten Punkt die Seite snappt. Dies bedeutet, dass Sie sicher sein können, dass etwas, was Sie am oberen Rand des Bildschirms erwarten, dort auch sein wird, wenn das Scrollen beendet ist. Es kann jedoch Probleme verursachen, wenn der Inhalt größer ist als erwartet — Benutzer könnten sich in der frustrierenden Lage befinden, dass sie nie zu einem bestimmten Punkt im Inhalt scrollen können. Daher sollte die Verwendung von mandatory sorgfältig überlegt werden und nur in Situationen verwendet werden, in denen Sie wissen, wie viel Inhalt auf dem Bildschirm oder dem scrollbaren Abschnitt zu jeder Zeit vorhanden ist.

Hinweis: Verwenden Sie nie mandatory, wenn der Inhalt eines Ihrer Kindelemente den übergeordneten Container überläuft, da der Benutzer dann nicht in der Lage sein wird, den überfließenden Inhalt sichtbar zu machen.

Der Wert proximity snappt Kindelemente nur an eine Position, wenn sie sich in der Nähe befinden, wobei die Browser den genauen Abstand bestimmen. Klicken Sie auf "Play", um das Beispiel unten im MDN Playground zu bearbeiten. Ändern Sie den Wert von scroll-snap-type zwischen mandatory und proximity, um den Effekt auf das Scrollerlebnis zu sehen.

html

<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 #333333;
  width: 300px;
}

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

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

css

.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 den Scroll Container gesetzt. Wenn der Inhalt seinen Container nicht überläuft, gibt es nichts zu scrollen.

Verwendung von scroll-snap-align

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

<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 #333333;
  width: 300px;
}

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

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

css

.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 auf none gesetzt oder nicht gesetzt ist (wobei es standardmäßig auf none gesetzt wird), kann der Benutzer dieses Element nicht in den sichtbaren Bereich scrollen.

Verwendung von scroll-padding

Wenn Sie start oder end verwenden und nicht möchten, dass der Inhalt direkt an den Rand des Scroll Containers snappt, oder wenn Sie die Snap-Position bei Verwendung von center leicht vom Zentrum versetzen möchten, verwenden Sie die scroll-padding-Eigenschaft oder ihre entsprechenden Langformwerte, um etwas Padding hinzuzufügen.

Im folgenden Beispiel ist scroll-padding auf 50px gesetzt. Wenn der Inhalt an den Anfang des zweiten und dritten Abschnitts snappt, hält das Scrollen 50 Pixel vom Anfang des Abschnitts entfernt an. Ändern Sie den Wert von scroll-padding, um zu sehen, wie sich der Abstand ändert.

html

<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 #333333;
  width: 300px;
}

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

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

css

.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 fixed-Element wie eine Navigationsleiste haben, die über den gescrollten Inhalt gelegt werden könnte. Durch die Verwendung von scroll-padding können Sie Platz für das fixe Element reservieren, wie im Beispiel unten gezeigt, in dem das <h1>-Element während des Scrollens auf dem Bildschirm bleibt. Ohne Padding würde die Überschrift beim Snappen über einige Inhalte überlappen.

<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 #333333;
  width: 300px;
}

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

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

css

.scroller h1 {
  position: sticky;
  top: 0;
  min-height: 40px;
  background-color: black;
  color: white;
  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;
}

Verwendung von scroll-margin

Die scroll-margin-Eigenschaft oder die Langform-Scroll-Margin-Werte können auf Kindelemente gesetzt werden, um einen Versatz vom definierten Kasten zu bestimmen. Dies ermöglicht unterschiedlich große Abstände für verschiedene Kindelemente und kann in Verbindung mit scroll-padding auf dem ü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 #333333;
  width: 300px;
}

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

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

css

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

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

Verwendung von scroll-snap-stop

Mit der scroll-snap-stop-Eigenschaft können Sie angeben, ob das Scrollen an den definierten Snap-Punkten stoppen muss. In den obigen Beispielen würde dies bedeuten, dass das Scrollen am Anfang jedes Abschnitts stoppt oder über Abschnitte hinweg springt.

Mit dieser Eigenschaftsdefinition können Sie sicherstellen, dass Benutzer jeden Abschnitt des Scrollers sehen und nicht versehentlich an ihnen vorbeiscrollen. Diese Einstellung kann jedoch auch die Benutzererfahrung negativ beeinflussen, da sie Benutzer daran hindert, schnell zu ihrem gewünschten Inhalt zu scrollen.

Siehe auch

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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden