::scroll-button()

<scroll-button-direction>

Ein Wert, der angibt, in welcher Richtung sich der gewählte Scroll-Knopf befinden soll. Folgende Werte sind verfügbar:

*

Wählt alle Scroll-Knöpfe des Ursprungselements aus, sodass Stile auf jeden von ihnen in einer einzelnen Regel angewendet werden können.

down

Wählt den Knopf, der den Inhalt nach unten scrollen wird.

left

Wählt den Knopf, der den Inhalt nach links scrollen wird.

right

Wählt den Knopf, der den Inhalt nach rechts scrollen wird.

up

Wählt den Knopf, der den Inhalt nach oben scrollen wird.

block-end

Wählt den Knopf, der den Inhalt in Block-End-Richtung scrollen wird.

block-start

Wählt den Knopf, der den Inhalt in Block-Start-Richtung scrollen wird.

inline-end

Wählt den Knopf, der den Inhalt in Inline-End-Richtung scrollen wird.

inline-start

Wählt den Knopf, der den Inhalt in Inline-Start-Richtung scrollen wird.

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

Die ::scroll-button()-Pseudoelemente werden nur in einem Scroll-Container generiert, wenn ihre content-Eigenschaften auf einen Wert ungleich none gesetzt sind. Sie werden als Geschwister der Kind-DOM-Elemente des Scroll-Containers erzeugt und stehen diesen sowie allen auf dem Container erzeugten ::scroll-marker-group direkt voran.

Sie können bis zu vier Scroll-Knöpfe pro Scroll-Container erzeugen, die den Inhalt zu den Start- und Endpunkten der Block- und Inline-Achsen scrollen werden. Das Argument des Selektors gibt an, welche Scroll-Richtung ausgewählt wird. Sie können auch einen Wert von * angeben, um alle ::scroll-button()-Pseudoelemente zu zielgerichtet zu stylen und so mit einer einzigen Regel auf alle Knöpfe Stile anzuwenden.

Die generierten Knöpfe verhalten sich wie reguläre <button>-Elemente, einschließlich der gemeinsamen Nutzung ihrer Standard-Browser-Stile. Sie sind fokussierbar, zugänglich und können wie reguläre Knöpfe aktiviert werden. Wenn ein Scroll-Knopf gedrückt wird, wird der Inhalt des Scroll-Containers in die angegebene Richtung um eine "Seite" gescrollt, oder in etwa die Abmessung des Scroll-Containers, ähnlich wie beim Drücken der Tasten Bild auf und Bild ab.

Es wird empfohlen, auf dem Scroll-Container CSS-Scroll-Snapping einzurichten und jedes einzelne Inhaltselement, das Sie scrollen möchten, als Snap-Ziel festzulegen. In diesem Fall bewirkt das Aktivieren eines Scroll-Knopfs, dass der Inhalt zum Snap-Ziel gescrollt wird, das eine "Seite" entfernt ist. Obwohl die Scroll-Knöpfe auch 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 Scroll-Knopfs weiter zu scrollen, wird der Knopf automatisch deaktiviert, andernfalls ist er aktiviert. Sie können die Scroll-Knöpfe in ihren aktivierten und deaktivierten Zuständen mit den :enabled- und :disabled-Pseudoklassen stylen.

Für weitere Beispiele für Karussells siehe Erstellen von CSS-Karussells.

In diesem Beispiel zeigen wir, wie Sie Scroll-Knöpfe auf einem CSS-Karussell erstellen.

HTML

Wir haben eine einfache 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 stylen

Wir konvertieren unser <ul> in ein Karussell, indem wir die display-Eigenschaft auf flex setzen, was eine einzelne, nicht umbruchende Zeile von <li>-Elementen erzeugt. Die overflow-x-Eigenschaft wird auf auto gesetzt, was bedeutet, dass, wenn die Elemente ihren Container in der x-Achse überschreiten, der Inhalt horizontal gescrollt wird. Wir konvertieren dann das <ul> in einen Scroll-Snap-Container und stellen sicher, 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;
}

Als nächstes stylen wir die <li>-Elemente, wobei 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 bei gescrolltem Inhalt an die linke Kante des Containers angedockt wird.

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

Erstellen der Scroll-Knöpfe

Zuerst werden alle Scroll-Knöpfe mit grundlegenden Stilen sowie Stilen basierend auf verschiedenen Zuständen gezielt angesprochen. Es ist wichtig, :focus-Stile für Tastaturbenutzer zu setzen. Da Scroll-Knöpfe automatisch auf disabled gesetzt werden, wenn kein weiteres Scrollen in dieser Richtung möglich ist, verwenden wir die :disabled-Pseudoklasse, um diesen Zustand zu adressieren.

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;
}

Als nächstes wird ein passendes Icon auf den linken und rechten Scroll-Knopf über die content-Eigenschaft gesetzt, was auch bewirkt, dass die Scroll-Knöpfe erzeugt werden:

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

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

Es ist nicht nötig, Alternativtext für die Icons im content festzulegen, da der Browser automatisch für geeignete zugängliche Namen sorgt.

Ergebnis

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

Das vorherige Beispiel funktioniert, aber die Knöpfe sind nicht optimal platziert. In diesem Abschnitt fügen wir etwas CSS hinzu, um sie mit Ankerpositionierung zu positionieren.

CSS

Zunächst wird ein Referenz-anchor-name auf das <ul> gesetzt, um es als benannten Anker zu definieren. Als nächstes wird bei jedem Scroll-Knopf die position auf absolute und die position-anchor-Eigenschaft auf den anchor-name der Liste gesetzt, um die beiden miteinander zu verknüpfen.

ul {
  anchor-name: --my-carousel;
}

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

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

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

Anschließend setzen wir Werte auf ihre Inset-Eigenschaften, um die horizontale Positionierung zu steuern. Wir verwenden anchor()-Funktionen, um die angegebenen Seiten der Knöpfe relativ zu den Seiten des Karussells zu positionieren. In jedem Fall wird die calc()-Funktion verwendet, um etwas Platz zwischen der Knopfkante und der Karussellkante hinzuzufügen. Zum Beispiel ist die rechte Kante des linken Scroll-Knopfs 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
• Erstellen von CSS-Karussells
• CSS Overflow-Modul
• CSS Ankerpositionierung-Modul
• CSS Carousel Gallery via chrome.dev (2025)