0Pricing
CSS Academy · Lektion

scroll-snap-type und scroll-snap-align

Erstellen Sie mit CSS-Scroll-Snap-Eigenschaften Carousel- und Paging-Scroll-Erlebnisse.

scroll-snap-type und scroll-snap-align ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist CSS Scroll Snap?

Mit CSS Scroll Snap können scrollbare Container nach dem Scrollen an bestimmte Positionen „einrasten“. So lassen sich kontrollierte Seiten- und Karussellverhalten ohne JavaScript erstellen.

scroll-snap-type am Container

Aktivieren Sie das Einrasten am scrollbaren Container:

  <div class="carousel">
    <div class="item">1</div><div class="item">2</div><div class="item">3</div>
  </div>

Werte von scroll-snap-type

Die Eigenschaft besteht aus zwei Teilen:

  • Achse: x, y oder both
  • Strenge: mandatory (rastet immer ein) oder proximity (rastet ein, wenn ein Einrastpunkt nahe ist)
  <div class="paged">Paged container</div>
  <div class="freeform">Freeform container</div>

scroll-snap-align an Elementen

Legen Sie fest, wo jedes untergeordnete Element innerhalb des Containers einrastet:

  <div class="carousel-demo">
    <div class="carousel-item">1</div><div class="carousel-item">2</div>
  </div>

Einrasten ganzseitiger Ansichten

Ein Layout mit vertikalem Seitenwechsel und bildschirmhohen Abschnitten:

  <div class="sections">
    <div class="section">Section 1</div><div class="section">Section 2</div>
  </div>

Einrasten eines horizontalen Karussells

Ein horizontales Kartenkarussell mit Einrastfunktion:

  <div class="carousel">
    <div class="card">Card 1</div><div class="card">Card 2</div><div class="card">Card 3</div>
  </div>

scroll-snap-stop

scroll-snap-stop: always verhindert, dass schnelles Scrollen Einrastpunkte überspringt. Benutzer können pro Scrollgeste nicht mehr als ein Element überspringen.

  <div class="slider">
    <div class="slide">1</div><div class="slide">2</div>
  </div>

scroll-snap-margin und scroll-padding

Versetzen Sie die Einrastposition an den Elementen (scroll-margin) oder am Container (scroll-padding):

  <div class="carousel">Carousel container</div>

overscroll-behavior

overscroll-behavior: contain verhindert Scrollverkettung: Wenn der Container seine Scrollgrenze erreicht, scrollt die Seite nicht ebenfalls weiter:

  <div class="modal-body">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>

Überlegungen zur Barrierefreiheit

Einrastende Karussells sollten weiterhin per Tastatur bedienbar sein. Pfeiltasten sollten zwischen Einrastpunkten wechseln. Fügen Sie ARIA-Rollen und Beschriftungen für Karussells hinzu. Programmatisches Scrollen per JavaScript sollte dieselben Einrastpunkte berücksichtigen.

CSS- im Vergleich zu JS-Karussells

CSS Scroll Snap deckt die meisten grundlegenden Anforderungen an Karussells ohne JavaScript ab: Einrasten, Ausblenden der Scrollbar und Ausrichtung über Innenabstände. Verwenden Sie eine JS-Bibliothek, wenn Sie Folgendes benötigen: Punktindikatoren, animierte Übergänge für Zurück-/Weiter-Schaltflächen oder eine komplexe Verwaltung der Barrierefreiheit.

Kurzer Test

Welcher Wert von scroll-snap-type stellt sicher, dass der Container immer genau an einem Einrastpunkt stoppt und niemals dazwischen?

Zusammenfassung

CSS Scroll Snap ermöglicht Seitenwechsel- und Karussellverhalten. Setzen Sie scroll-snap-type: x mandatory am Container und scroll-snap-align: start an den Elementen. Verwenden Sie scroll-snap-stop: always, um das Überspringen von Einrastpunkten zu verhindern. Kombinieren Sie dies mit overscroll-behavior: contain, um Scrollverkettung zu verhindern. Blenden Sie Scrollbars mit scrollbar-width: none aus, um eine aufgeräumte Darstellung zu erhalten.

Häufig gestellte Fragen

Ist die Lektion „scroll-snap-type und scroll-snap-align“ kostenlos?

Ja — der vollständige Text von „scroll-snap-type und scroll-snap-align“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „scroll-snap-type und scroll-snap-align“?

Erstellen Sie mit CSS-Scroll-Snap-Eigenschaften Carousel- und Paging-Scroll-Erlebnisse. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „scroll-snap-type und scroll-snap-align“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. overflow: hidden, scroll, auto, clip
  2. scroll-behavior: smooth
  3. scroll-snap-type und scroll-snap-align
  4. Scrollbar-Styling mit ::-webkit-scrollbar
← Zurück zu CSS Academy