Karussell ohne JavaScript mit scroll-snap und Scroll-Markern

Ein Karussell besteht aus vier Dingen: einer Reihe, die sich seitlich bewegen lässt, einem Einrasten an den Elementen, einer Anzeige, an welcher Stelle man gerade ist, und zwei Knöpfen für vor und zurück. Nur das dritte und das vierte Ding sind wirklich Arbeit. Trotzdem landet in den meisten Projekten eine Lösung im Paket, die alle vier mitbringt, und damit auch das Wischen selbst nachbaut.

Das ist der eigentliche Aufwand, und er fällt an einer Stelle an, an der niemand ihn sehen will. Wer Bewegung in JavaScript nachbaut, übernimmt Trägheit, Abbremsen, das Verhalten beim Loslassen mitten in der Bewegung, die Richtung bei rechtsläufiger Schrift, das Verhalten beim Zoomen und den Umgang mit einem Trackpad, das anders beschleunigt als ein Finger. Jeder dieser Punkte ist für sich klein und zusammen sind sie der Grund, warum eigene Karussells sich immer eine Spur falsch anfühlen.

Der Browser hat das alles bereits, und zwar nicht als Zusatz, sondern als seine Hauptaufgabe. Ein Element mit zu viel Inhalt ist ein Scroll-Container, und ein Scroll-Container scrollt richtig. Die einzige Angabe, die fehlt, ist die, wo er zur Ruhe kommen soll. Genau diese Angabe macht scroll-snap, und damit ist der schwierige Teil erledigt, bevor er angefangen hat.

Drei Angaben genügen. Die Reihe bekommt overflow-x mit auto, damit sie überhaupt scrollt. Sie bekommt scroll-snap-type mit der Achse und der Strenge, meist x mandatory, damit der Browser nach dem Loslassen auf einen Punkt zusteuert. Und die Kinder bekommen scroll-snap-align, das festlegt, welche ihrer Kanten am Container ausgerichtet wird. Mit center liegt das aktuelle Element in der Mitte, mit start an der linken Kante.

Zwei weitere Zeilen entscheiden darüber, ob sich das Ergebnis gut anfühlt. scroll-snap-stop mit always sorgt dafür, dass jedes Element angesteuert wird und ein kräftiger Wisch nicht über drei hinwegfliegt. Und scroll-padding hält an den Kanten des Containers einen Streifen frei, sodass das angesteuerte Element nicht bündig an der Kante klebt. Beides fehlt in den meisten Beispielen und beides merkt man sofort, wenn es fehlt.

Die Breite der Elemente gehört zur selben Entscheidung. Eine feste Breite macht aus dem Karussell eine Reihe gleich großer Karten, ein Wert wie min(28rem, 85%) sorgt dafür, dass auf dem Telefon ein Stück des nächsten Elements sichtbar bleibt. Dieses sichtbare Stück ist nicht Dekoration, es ist die einzige Stelle, an der die Oberfläche von selbst verrät, dass es weitergeht. Wer es weglässt, braucht die Pfeile aus dem nächsten Abschnitt doppelt so dringend.

Die Punkte unter einem Karussell sind bisher Handarbeit: ein Element pro Bild, ein Klick-Listener pro Element, eine Klasse, die den aktuellen Stand abbildet, und eine Berechnung, die diesen Stand beim Scrollen nachführt. Genau diese vier Dinge nimmt der Browser jetzt ab. Die Reihe bekommt scroll-marker-group mit before oder after, und damit entsteht eine Fläche, in der die Marker liegen. Jedes Kind kann ein ::scroll-marker erzeugen, sobald es ein content bekommt, und zwar auch das leere, also content mit zwei Anführungszeichen.

Der aktuelle Stand läuft von selbst mit. Die Pseudo-Klasse :target-current trifft immer genau den Marker, dessen Element gerade im Bild ist, und das ohne eine Zeile, die beim Scrollen rechnet. Ein Klick auf einen Marker springt zum zugehörigen Element, auch das ohne Zutun. Was man dort noch schreibt, ist reine Gestaltung: Größe, Form, Abstand und der Unterschied zwischen aktiv und nicht aktiv.

Die Pfeile funktionieren nach demselben Muster. ::scroll-button nimmt eine Richtung als Argument, also left, right, up und down oder die Entsprechungen im Textfluss, und erzeugt bei einem content einen echten Knopf. Ein Druck darauf scrollt um etwa eine Containerbreite weiter, bei gesetztem Einrasten also zum nächsten Element. Und sobald in einer Richtung nichts mehr kommt, schaltet der Browser den Knopf von selbst ab, abfragbar mit :disabled. Das ist die Zeile, die man in eigenen Lösungen am häufigsten vergisst.

Mehr, als die meisten eigenen Karussells liefern. Sobald eine Marker-Gruppe vorhanden ist, bekommt die Reihe die Semantik einer Registerkartenleiste: Die Gruppe ist ein Tabstopp, und innerhalb der Gruppe wechselt man mit den Pfeiltasten von Element zu Element. Marker und Knöpfe sind dabei keine gestylten Divs, sondern Knöpfe mit allem, was dazugehört, und der Browser vergibt die zugänglichen Namen selbst. Das Zeichen im content braucht deshalb keine Beschriftung daneben.

Wo before und after stehen, ist dabei keine Geschmacksfrage. Der Wert bestimmt nicht nur die Lage im Layout, sondern auch die Stelle in der Reihenfolge der Tabstopps. Eine Gruppe, die unter der Reihe sitzt, aber vor ihr angesprungen wird, führt genau zu dem Sprung, den man bei fremden Seiten als Unordnung empfindet. Setz den Wert deshalb nach dem, was man sieht.

Bleibt der Scroll-Container selbst. Chromium gibt einem Scroll-Container seit Version 132 einen Tabstopp, aber nur dann, wenn darin nichts anderes fokussierbar ist. Darauf lässt sich nicht bauen, denn die anderen Browser handhaben das unterschiedlich. Die verlässliche Regel ist deshalb einfach: Enthalten die Elemente ohnehin Links oder Knöpfe, erreicht die Tastatur sie auf dem normalen Weg, und das Scrollen folgt dem Fokus. Enthalten sie nur Bilder oder Text, gib der Reihe selbst ein tabindex mit null und einen Namen, damit sie überhaupt erreichbar ist und angesagt wird.

Die beiden Schichten sind unterschiedlich weit. Das Einrasten ist alt und überall vorhanden: scroll-snap-type und scroll-snap-align gibt es in Chrome seit Version 69, in Safari seit Version 11 und in Firefox seit Version 68, scroll-snap-stop ist in Firefox seit Version 103 dabei. Diese Schicht braucht keine Abfrage, sie ist Alltag.

Die Marker und die Knöpfe sind neu. ::scroll-marker, ::scroll-marker-group, ::scroll-button und :target-current kamen zusammen in Chrome 135 und damit auch in Edge. In Safari und in Firefox fehlen sie bisher. Das ist für die Entscheidung wichtiger, als es klingt: Es geht nicht um einen Rückfall, sondern um eine Reihenfolge. Was der Browser nicht kennt, erzeugt er nicht, und übrig bleibt die untere Schicht, die ohnehin vollständig ist.

Eine Abfrage braucht trotzdem genau eine Stelle, nämlich die, an der du etwas wegnimmst. Das Verstecken der Scrollleiste gehört in einen Block, den nur der Browser liest, der auch Marker erzeugt, und dafür reicht @supports mit selector und dem Namen des Pseudo-Elements. Wer die Marker auch dort möchte, wo es sie noch nicht gibt, hat seit Chrome 140 eine zweite Möglichkeit: scroll-target-group mit auto macht aus einem vorhandenen Element voller Sprungmarken eine Markerleiste und färbt die aktuelle mit :target-current. Die Links darin sind echte Links und funktionieren in jedem Browser, nur das Mitlaufen des Zustands bleibt vorerst Chromium vorbehalten.

Vier Dinge bleiben außerhalb, und sie sind leicht zu merken, weil sie alle dasselbe gemeinsam haben: Bei allen vieren bewegt sich etwas, ohne dass jemand es bewegt hat.

Bleibt die Frage, die sich am Ende jedes Karussells stellt und die nichts mit CSS zu tun hat: Gehört der Inhalt überhaupt hinter eine Bewegung? Was an zweiter Stelle liegt, wird selten gesehen, und das gilt unabhängig davon, wie gut das Einrasten funktioniert. Für acht gleichrangige Produktbilder ist das in Ordnung, für zwei Aussagen, die beide wichtig sind, nicht.

Wenn der Inhalt dort hingehört, ist die Bilanz dieses Ansatzes allerdings klar: Was früher eine Abhängigkeit war, sind jetzt zwanzig Zeilen CSS, die niemand aktualisieren muss. Und der Teil, der heute noch fehlt, fehlt auf die angenehmste Art, nämlich ohne Spuren.