CSS Scroll Snap: Karussells und ganzseitige Abschnitte
Leitfaden zu CSS Scroll Snap
CSS Scroll Snap: Karussells, ganzseitige Abschnitte und eine Live-Spielwiese
Teste jeden Wert von scroll-snap-type, scroll-snap-align und scroll-snap-stop in einem Live-Scroller und kopiere dann ein Karussell nur mit CSS und ganzseitige Abschnitte, die barrierefrei bleiben.
Scroll Snap sorgt dafür, dass eine scrollende Box auf ausgewählten Kindelementen zur Ruhe kommt statt irgendwo. Setze scroll-snap-type: x mandatory (oder y, oder proximity) auf den Scroll-Container und dann scroll-snap-align: start, center oder end auf jedes Kind. Ergänze scroll-padding für fixierte Header und scroll-snap-stop: always, um bei jedem Element anzuhalten.
Scroll-Snap-Eigenschaften auf einen Blick
Eigenschaft
Gesetzt auf
Werte
Scroll-Container
none, x, y, block, inline, both + mandatory oder proximity
Jedes Kind
none, start, center, end (ein oder zwei Werte)
Jedes Kind
normal (darf übersprungen werden), always (muss anhalten)
Scroll-Container
Innenabstand als Länge oder Prozent, wie padding
Jedes Kind
Längenabstand nach außen um den Snap-Bereich
Für Scroll Snap brauchte man früher eine Karussell-Bibliothek. Heute bekommst du mit ein paar Zeilen CSS wischbare Karten, eine seitenweise Galerie oder Vollbild-Abschnitte, wobei der Browser Momentum-Scrolling und Tastaturunterstützung übernimmt. Nutze die Spielwiese, um den Unterschied zwischen den Werten zu spüren, bevor du Code kopierst.
Wähle in der Spielwiese eine Achse und die Strenge für den Container.
Wähle, wie jede Folie ausgerichtet wird und ob das Scrollen bei jeder Folie anhalten muss.
Scrolle die Vorschau mit Trackpad, Mausrad, Touch oder, nachdem du hineingeklickt hast, mit den Pfeiltasten.
Kopiere das erzeugte CSS oder nimm eines der vollständigen Muster weiter unten.
Wenn eine Achse ohne Schlüsselwort für die Strenge angegeben ist, wird proximity verwendet.
Nimm für lange Inhalte lieber proximity: mandatory kann Leser einsperren, wenn ein Kind höher ist als der Container.
Mach den Scroller mit tabindex="0" und einem zugänglichen Namen fokussierbar, damit Tastaturnutzer ihn mit den Pfeiltasten scrollen können.
Snapping funktioniert mit scrollIntoView() und Ankerlinks, einfache Weiter- und Zurück-Buttons können also ein Karussell steuern.
Häufige Fragen
Was ist der Unterschied zwischen mandatory und proximity?
Mit mandatory kommt der Container immer auf einer Snap-Position zur Ruhe, sobald das Scrollen endet. Mit proximity rastet er nur ein, wenn das Scrollen nahe an einer endet, sodass man dazwischen frei lesen kann. proximity ist der Standard, wenn du nur die Achse angibst.
Warum funktioniert Scroll Snap nicht?
Die üblichen Ursachen: scroll-snap-type steht auf den Kindern statt auf dem scrollenden Elternelement, das Elternelement läuft gar nicht über (setze overflow-x: auto und eine feste Größe), oder die Kinder haben kein scroll-snap-align. Beim Snapping auf Seitenebene ist der Container html, nicht body.
Wie verhindere ich, dass ein fixierter Header eingerastete Abschnitte verdeckt?
Setze scroll-padding-top auf dem Scroll-Container auf die Höhe des Headers, zum Beispiel html { scroll-padding-top: 64px; }. Eingerastete Abschnitte und Ankersprünge halten dann unterhalb des Headers an statt darunter.
Kann ich ein Karussell ganz ohne JavaScript bauen?
Für Wischen und Scrollen ja: Eine Flex-Zeile mit overflow-x: auto und x-mandatory-Snapping ist ein funktionierendes Karussell. Punktanzeigen für die aktuelle Folie, Autoplay und Endlosschleifen brauchen aber weiterhin etwas Skript.
Wird CSS Scroll Snap überall unterstützt?
scroll-snap-type ist seit 2022 in Chrome, Edge, Firefox und Safari als Baseline breit verfügbar, scroll-snap-stop seit Juli 2022. Du kannst es ohne Fallback nutzen, Browser ohne Unterstützung scrollen einfach frei.
Karussells, die Leute wirklich nutzen können
Lass die nächste Karte hereinlugen, indem du jede Folie schmaler als den Container machst, zum Beispiel flex: 0 0 85%. Der sichtbare Rand zeigt, dass es noch mehr zum Wischen gibt, was eine exakt passende Folie nicht tut.
Gib dem Scroller ein Label wie aria-label="Customer photos" und halte die Folien als Liste. Verstecke Folien außerhalb des sichtbaren Bereichs nicht vor Screenreadern und nutze nie Autoplay ohne Pause-Steuerung.
Ganzseitige Abschnitte ohne Falle
Snapping auf volle Höhe sieht in einer Demo beeindruckend aus und nervt Leser, wenn ein Abschnitt mehr Text hat, als auf den Bildschirm passt, weil mandatory-Snapping sie immer wieder daran vorbeizieht. Nutze proximity für Seitenabschnitte oder stell sicher, dass jeder Abschnitt wirklich auf einen Smartphone-Bildschirm passt.
Respektiere reduzierte Bewegung, indem du scroll-behavior: smooth innerhalb einer Query prefers-reduced-motion: reduce abschaltest. Das Snapping selbst kannst du behalten, da es nur so weit bewegt, wie der Leser es verlangt hat.
Kartenkarussell nur mit CSS
Horizontales Karussell mit hereinlugender nächster Karte
Wische, scrolle seitwärts oder klicke hinein und nutze die Pfeiltasten. Jede Karte ist 80 Prozent breit, daher zeigt sich die nächste am Rand.
Ganzseitige Abschnitte
Vertikale Abschnitte, die unter einem fixierten Header einrasten
Das Snapping liegt auf html, dem Scroller der Seite. scroll-padding-top hält Abschnitte von einem 64px hohen Header frei, und proximity verhindert, dass lange Abschnitte zur Falle werden.
Weiter- und Zurück-Buttons
Das Karussell mit scrollBy steuern
Der Browser beendet die Bewegung am nächsten Snap-Punkt, Scrollen um eine Kartenbreite landet also genau auf der nächsten Karte.
Scroll-Snap-Spielwiese
Achse
Strenge
Ausrichtung der Folien
Bei jeder Folie anhalten
Scroll-Snap-Vorschau, scrolle oder nutze die Pfeiltasten