::scroll-button()

Syntax

::scroll-button(<scroll-button-direction>) { /* ... */ } 

Parameter

<scroll-button-direction>

Ein Wert, der die Richtung des zu wählenden Scroll-Buttons repräsentiert. Die folgenden Werte sind verfügbar:

*

Wählt alle Scroll-Buttons des ursprünglichen Elements aus und ermöglicht das Anwenden von Stilen auf alle in einer einzigen Regel.

down

Wählt den Button, der den Inhalt nach unten scrollt.

left

Wählt den Button, der den Inhalt nach links scrollt.

right

Wählt den Button, der den Inhalt nach rechts scrollt.

up

Wählt den Button, der den Inhalt nach oben scrollt.

block-end

Wählt den Button, der den Inhalt in die Block-End-Richtung scrollt.

block-start

Wählt den Button, der den Inhalt in die Block-Start-Richtung scrollt.

inline-end

Wählt den Button, der den Inhalt in die Inline-End-Richtung scrollt.

inline-start

Wählt den Button, der den Inhalt in die Inline-Start-Richtung scrollt.

Die Spezifikation definiert auch zwei weitere Werte — next und prev —, die jedoch derzeit von keinem Browser unterstützt werden.

Beschreibung

Die ::scroll-button() Pseudoelemente werden nur in einem Scroll Container generiert, wenn deren content-Eigenschaften auf einen Wert ungleich none gesetzt sind. Sie werden als Geschwister der Kind-DOM-Elemente des Scroll Containers generiert, unmittelbar vor diesen und jedem auf dem Container generierten ::scroll-marker-group.

Sie können bis zu vier Scroll-Buttons pro Scroll Container erzeugen, die den Inhalt in Richtung Anfang und Ende der Block- und Inline-Achsen scrollen. Das Argument des Selektors gibt an, welche Scrollrichtung ausgewählt wird. Sie können auch einen Wert von * angeben, um alle ::scroll-button() Pseudoelemente anzusprechen und allen Buttons in einer einzigen Regel Stile zu geben.

Die generierten Buttons verhalten sich wie reguläre <button>-Elemente und teilen auch deren standardmäßige Browser-Stile. Sie sind fokussierbar, zugänglich und können wie reguläre Buttons aktiviert werden. Wenn ein Scroll-Button gedrückt wird, scrollt der Inhalt des Scroll Containers in die angegebene Richtung um eine "Seite", oder ungefähr in der Dimension des Scroll Containers, ähnlich wie beim Drücken der Tasten PgUp und PgDn.

Es wird empfohlen, CSS-Scroll-Snapping auf dem Scroll Container einzurichten und jedes separate Inhalts-Element, das Sie scrollen möchten, als Snap-Ziel zu definieren. In diesem Fall wird durch Aktivieren eines Scroll-Buttons der Inhalt zum ein "Seite" entfernten Snap-Ziel gescrollt. Auch wenn die Scroll-Buttons ohne Scroll-Snapping funktionieren, wird möglicherweise nicht der gewünschte Effekt erzielt.

Wenn es nicht möglich ist, in einer bestimmten Scrollrichtung eines Scroll-Buttons weiter zu scrollen, wird der Button automatisch deaktiviert, andernfalls bleibt er aktiviert. Sie können die Scroll-Buttons in ihren aktivierten und deaktivierten Zuständen mit den Pseudo-Klassen :enabled und :disabled stylen.

Beispiel

Siehe Erstellung von CSS-Carousels für weitere Carousel-Beispiele.

Erstellung von Scroll-Buttons

In diesem Beispiel zeigen wir, wie Sie Scroll-Buttons auf einem CSS-Carousel erstellen.

HTML

Wir haben eine grundlegende HTML-<ul>-Liste mit mehreren <li>-Listenelementen.

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> </ul> 

CSS

Styling des Carousels

Wir wandeln unser <ul> in ein Carousel um, indem wir das display auf flex setzen, und so eine einzige, nicht umbruchende Reihe von <li>-Elementen schaffen. Die overflow-x-Eigenschaft wird auf auto gesetzt, was bedeutet, dass der Inhalt bei Überlauf auf der x-Achse horizontal scrollt. Danach wird das <ul> in einen Scroll-Snap-Container umgewandelt und so sichergestellt, dass Elemente immer einrasten, wenn der Container mit einem scroll-snap-type-Wert von mandatory gescrollt wird.

ul { display: flex; gap: 4vw; padding-left: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; } 

Anschließend stylen wir die <li>-Elemente, indem wir die flex-Eigenschaft verwenden, um sie auf 100% der Breite des Containers zu setzen. Der scroll-snap-align-Wert von start bewirkt, dass die linke Seite des am weitesten links sichtbaren Elements beim Scrollen des Inhalts an der linken Kante des Containers einrastet.

li { list-style-type: none; background-color: #eeeeee; flex: 0 0 100%; height: 100px; padding-top: 20px; scroll-snap-align: start; text-align: center; } 

Erstellung der Scroll-Buttons

Zuerst werden alle Scroll-Buttons mit einigen grundlegenden Stilen sowie einem Zustands-basierten Styling angesprochen. Es ist wichtig, :focus-Stile für Tastaturbenutzer zu setzen. Da Scroll-Buttons automatisch auf disabled gesetzt werden, wenn kein weiteres Scrollen in dieser Richtung stattfinden kann, verwenden wir die :disabled-Pseudo-Klasse, um diesen Zustand anzusprechen.

ul::scroll-button(*) { border: 0; font-size: 2rem; background: none; color: black; opacity: 0.7; cursor: pointer; } ul::scroll-button(*):hover, ul::scroll-button(*):focus { opacity: 1; } ul::scroll-button(*):active { translate: 1px 1px; } ul::scroll-button(*):disabled { opacity: 0.2; cursor: unset; } 

Dann wird über die content-Eigenschaft ein passendes Icon auf den linken und rechten Scroll-Buttons gesetzt, was ebenfalls dazu führt, dass die Scroll-Buttons generiert werden:

ul::scroll-button(left) { content: "◄"; } ul::scroll-button(right) { content: "►"; } 

Für die Icons im content müssen keine Alternativtexte festgelegt werden, da der Browser automatisch passende zugängliche Namen bereitstellt.

Ergebnis

Beachten Sie, wie die Scroll-Buttons unten links im Carousel erstellt werden. Versuchen Sie, sie zu drücken, um zu sehen, wie sie den Inhalt scrollen.

Positionierung der Scroll-Buttons

Das vorherige Beispiel funktioniert, aber die Buttons sind nicht ideal positioniert. In diesem Abschnitt fügen wir etwas CSS hinzu, um sie mit Anchor-Positionierung zu positionieren.

CSS

Zuerst wird auf dem <ul> ein Referenz-anchor-name gesetzt, um es als benannten Anker zu definieren. Anschließend wird bei jedem Scroll-Button die position auf absolute und die position-anchor-Eigenschaft auf den anchor-name der Liste gesetzt, um die beiden zu verbinden.

ul { anchor-name: --my-carousel; } ul::scroll-button(*) { position: absolute; position-anchor: --my-carousel; } 

Um jeden Scroll-Button tatsächlich zu positionieren, setzen wir zunächst einen align-self-Wert von anchor-center auf beide, um sie vertikal auf dem Carousel zu zentrieren:

ul::scroll-button(*) { align-self: anchor-center; } 

Dann setzen wir Werte für ihre Inset-Eigenschaften, um die horizontale Positionierung zu handhaben. Wir verwenden anchor()-Funktionen, um die angegebenen Seiten der Buttons relativ zu den Seiten des Carousels zu positionieren. In jedem Fall wird die calc()-Funktion verwendet, um etwas Abstand zwischen der Button-Kante und der Carousel-Kante hinzuzufügen. Zum Beispiel wird die rechte Kante des linken Scroll-Buttons 45 Pixel rechts der linken Kante des Carousels positioniert.

ul::scroll-button(left) { right: calc(anchor(left) - 45px); } ul::scroll-button(right) { left: calc(anchor(right) - 45px); } 

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• scroll-marker-group
• ::scroll-marker-group
• ::scroll-marker
• ::column
• :target-current
• Erstellung von CSS-Carousels
• CSS-Overflow Modul
• CSS-Ankerpositionierung Modul
• CSS Carousel Gallery über chrome.dev (2025)