Grundkonzepte des Scroll-Snap

Bevor Sie Scroll-Snapping definieren können, müssen Sie das Scrollen in 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.

Danach können Sie das Scroll-Snapping am Scroll-Container mit den folgenden zwei Schlüsseleigenschaften definieren:

• scroll-snap-type: Mit dieser Eigenschaft können Sie festlegen, ob der scrollbare Viewport einrasten kann, 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 gesetzt und Sie können damit die Einrastposition jedes Kindes oder das Fehlen einer solchen definieren.
• scroll-snap-stop: Diese Eigenschaft sorgt dafür, dass ein Kind während des Scrollens eingerastet und nicht übergangen wird.
• scroll-margin: Diese Eigenschaft kann an Kindelementen gesetzt werden, die während des Scrollens eingerastet werden, um einen Abstand von der definierten Box zu schaffen.
• scroll-padding: Diese Eigenschaft kann auf den Scroll-Container gesetzt werden, um einen Einrastversatz zu schaffen.

Das unten stehende 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 enden 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 scroll-snap-type-Eigenschaft muss die Achse kennen, entlang der das Scroll-Snapping erfolgt. 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 ermöglichen.

Sie können außerdem die Schlüsselwörter mandatory oder proximity verwenden. Das Schlüsselwort mandatory weist den Browser an, dass der Inhalt muss an einen bestimmten Punkt einrasten, egal wo sich das Scrollen befindet. Das Schlüsselwort proximity bedeutet, dass der Inhalt möglicherweise an den Punkt einrastet, es aber nicht muss.

Die Verwendung von mandatory sorgt für 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 am oberen Rand des Bildschirms erwarten, dort sein wird, wenn das Scrollen endet. Es kann jedoch Probleme verursachen, wenn der Inhalt größer ist als erwartet – Benutzer könnten sich in der frustrierenden Situation wiederfinden, dass sie niemals an einen bestimmten Punkt im Inhalt scrollen können. Daher sollte die Verwendung von mandatory sorgfältig überlegt erfolgen und nur in Situationen eingesetzt werden, in denen Sie wissen, wie viel Inhalt auf dem Bildschirm oder im scrollbaren Abschnitt zu jeder Zeit vorhanden ist.

Der proximity-Wert rastet Kindelemente nur dann an einer Position ein, 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. Wechseln Sie den Wert von scroll-snap-type zwischen mandatory und proximity, um den Effekt auf das Scroll-Erlebnis zu sehen.

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

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 anzuzeigen, an dem der Inhalt einrasten soll. Klicken Sie im Beispiel unten auf "Play" und ändern Sie den Wert von scroll-snap-align, um zu sehen, wie sich dies auf das Scrollverhalten 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 auf einem Kind entweder auf none gesetzt oder nicht gesetzt ist (in diesem Fall wird es standardmäßig auf none gesetzt), kann der Benutzer dieses Element nicht ins Blickfeld scrollen.

Wenn Sie start oder end verwenden und nicht möchten, dass der Inhalt direkt am Rand des Scroll-Containers einrastet, oder wenn Sie möchten, dass die Einrastposition leicht vom Zentrum versetzt ist, wenn center verwendet wird, verwenden Sie die scroll-padding-Eigenschaft oder die entsprechenden Langform-Werte, um etwas Polsterung hinzuzufügen.

Im Beispiel unten ist scroll-padding auf 50px gesetzt. Wenn der Inhalt am 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 Distanz 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 kann nützlich sein, wenn Sie ein fixed Element wie eine Navigationsleiste haben, die sonst den gescrollten Inhalt überlappen könnte. Mit scroll-padding können Sie Platz für das feste Element reservieren, wie im unten stehenden Beispiel gezeigt, wo das <h1>-Element auf dem Bildschirm bleibt, während der Inhalt darunter scrollt. Ohne Polsterung würde die Überschrift beim Einrasten einen Teil des Inhalts ü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 #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 scroll-margin-Eigenschaft oder die Langform-Werte der Scroll-Margin können an Kindelementen gesetzt werden, um einen Abstand von der definierten Box zu schaffen. Dadurch können unterschiedliche Mengen an Platz für verschiedene Kindelemente bereitgestellt werden und sie kann zusammen 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;
}

Verwenden Sie die scroll-snap-stop-Eigenschaft, um anzugeben, 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 überspringen kann.

Mit dieser Eigenschaftsdefinition können Sie sicherstellen, dass Benutzer jeden Abschnitt des Scrollbereichs sehen und nicht versehentlich daran vorbeiscrollen. Allerdings kann diese Einstellung auch die Benutzererfahrung negativ beeinflussen, indem sie verhindert, dass der Benutzer schnell zu seinem gewünschten Inhalt scrollt.

• 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 auf 12 Days of Web (2019)
• Scroll snap Beispiele auf CodePen