::scroll-button()

<scroll-button-direction>

Ein Wert, der angibt, welche Scrollrichtung Sie auswählen möchten. Die folgenden Werte sind verfügbar:

*

Wählt alle Scroll-Buttons des Ursprungselements aus, sodass Stile in einer einzigen Regel angewendet werden können.

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 andere Werte – next und prev –, aber diese werden derzeit in keinem Browser unterstützt.

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

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

Die generierten Buttons verhalten sich genauso wie reguläre <button>-Elemente, inklusive ihrer Standard-Browser-Stile. Sie sind fokussierbar, zugänglich und können wie normale Buttons aktiviert werden. Wenn ein Scroll-Button gedrückt wird, wird der Inhalt des Scroll-Containers in der angegebenen Richtung um eine "Seite" gescrollt, was ungefähr der Dimension des Scroll-Containers entspricht, ähnlich wie beim Drücken der BildAuf und BildAb-Tasten.

Es wird empfohlen, CSS-Scroll-Snapping im Scroll-Container einzurichten und jedes einzelne Inhaltselement, das Sie scrollen möchten, als Snap-Target zu setzen. In diesem Fall wird beim Aktivieren eines Scroll-Buttons der Inhalt zum Snap-Target gescrollt, das eine "Seite" entfernt ist. Während die Scroll-Buttons ohne Scroll-Snapping funktionieren, erzielen Sie möglicherweise nicht den gewünschten Effekt.

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

Siehe Erstellung von CSS-Karussells für weitere Karussell-Beispiele.

In diesem Beispiel wird demonstriert, wie Scroll-Buttons auf einem CSS-Karussell erstellt werden.

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

Das Karussell gestalten

Wir konvertieren unser <ul> in ein Karussell, indem wir das display auf flex setzen und eine einzige, nicht umbruchende Zeile von <li>-Elementen erstellen. Die overflow-x-Eigenschaft wird auf auto gesetzt, was bedeutet, dass wenn die Elemente ihren Container auf der x-Achse überfließen, der Inhalt horizontal scrollt. Wir wandeln das <ul> dann in einen Scroll-Snap-Container um, um sicherzustellen, dass Elemente beim Scrollen des Containers immer an ihrem Platz einrasten, mit einem scroll-snap-type-Wert von mandatory.

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

Als nächstes gestalten wir die <li>-Elemente und verwenden die flex-Eigenschaft, um sie 100% der Breite des Containers ausfüllen zu lassen. Der scroll-snap-align-Wert von start sorgt dafür, dass die linke Seite des am weitesten links sichtbaren Elements beim Scrollen des Inhaltes an der linken Kante des Containers einrastet.

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

Die Scroll-Buttons erstellen

Zuerst werden alle Scroll-Buttons mit einigen grundlegenden Stilen und Stilen basierend auf verschiedenen Zuständen angesprochen. Es ist wichtig, :focus-Stile für Tastaturnutzer zu setzen. Außerdem werden Scroll-Buttons automatisch auf disabled gesetzt, wenn in dieser Richtung kein weiteres Scrollen möglich ist. Wir verwenden die :disabled-Pseudoklasse, um diesen Zustand anzusprechen.

ul::scroll-button(*) {
  border: 0;
  font-size: 2rem;
  background: none;
  color: rgb(0 0 0 / 0.7);
  cursor: pointer;
}

ul::scroll-button(*):hover,
ul::scroll-button(*):focus {
  color: rgb(0 0 0 / 1);
}

ul::scroll-button(*):active {
  translate: 1px 1px;
}

ul::scroll-button(*):disabled {
  color: rgb(0 0 0 / 0.2);
  cursor: unset;
}

Als nächstes wird ein entsprechendes Icon auf die linken und rechten Scroll-Buttons über die content-Eigenschaft gesetzt, was auch die Erstellung der Scroll-Buttons bewirkt:

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

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

Wir müssen keinen alternative Text für die Icons im content setzen, da der Browser automatisch geeignete zugängliche Namen bereitstellt.

Ergebnis

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

Das vorherige Beispiel funktioniert, aber die Buttons sind nicht ideal platziert. In diesem Abschnitt werden wir etwas CSS hinzufügen, um sie mit der Ankerpositionierung zu positionieren.

CSS

Zuerst wird eine Referenz anchor-name auf das <ul> gesetzt, um es als benannten Anker zu definieren. Als nächstes wird jedem Scroll-Button seine position auf absolute gesetzt und seine position-anchor-Eigenschaft auf den anchor-name der Liste, um die beiden zu verbinden.

ul {
  anchor-name: --myCarousel;
}

ul::scroll-button(*) {
  position: absolute;
  position-anchor: --myCarousel;
}

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

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

Dann setzen wir Werte auf ihren Inset-Eigenschaften für die horizontale Positionierung. Wir verwenden anchor()-Funktionen, um die spezifizierten Seiten der Buttons relativ zu den Seiten des Karussells zu positionieren. In jedem Fall wird die calc()-Funktion verwendet, um etwas Platz zwischen der Buttonkante und der Karussellkante zu lassen. Zum Beispiel wird die rechte Kante des linken Scroll-Buttons 45 Pixel rechts von der linken Kante des Karussells positioniert.

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

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

Ergebnis

• scroll-marker-group
• ::scroll-marker-group
• ::scroll-marker
• ::column
• :target-current
• Erstellung von CSS-Karussells
• CSS-Überlauf-Modul
• CSS-Ankerpositionierung-Modul
• CSS Carousel Gallery via chrome.dev (2025)