::scroll-button() CSS pseudo-element

Syntax

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

Parameter

<scroll-button-direction>

Ein Wert, der die Richtung des gescrollten Buttons angibt, den Sie auswählen möchten. Die folgenden Werte sind verfügbar:

*

Wählt alle Scroll-Buttons des ursprünglichen Elements aus, wodurch Stile in einer einzigen Regel auf alle angewendet werden können.

down

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

left

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

right

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

up

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

block-end

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

block-start

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

inline-end

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

inline-start

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

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

Beschreibung

Die ::scroll-button() Pseudoelemente werden in einem Scroll-Container nur dann generiert, wenn ihre content-Eigenschaften auf einen anderen Wert als none gesetzt sind. Sie werden als Geschwister der Scroll-Container-Kind-DOM-Elemente generiert und erscheinen direkt vor diesen und jedem ::scroll-marker-group, das auf dem Container generiert wird.

Sie können bis zu vier Scroll-Buttons pro Scroll-Container generieren, die den Inhalt in den Start- und Endpunkten der Block- und Inline-Achsen scrollen. Das Argument des Selektors gibt an, welche Scroll-Richtung ausgewählt ist. Sie können auch den Wert * angeben, um alle ::scroll-button() Pseudoelemente zu adressieren, was es ermöglicht, Stile für alle Buttons in einer einzigen Regel bereitzustellen.

Die generierten Buttons verhalten sich wie reguläre <button>-Elemente und teilen 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, wird der Inhalt des Scroll-Containers in der angegebenen Richtung um eine "Seite" gescrollt, also ungefähr um die Dimension des Scroll-Containers, ähnlich wie beim Drücken der BildAuf und BildAb-Tasten.

Es wird empfohlen, CSS-Scroll-Snapping auf dem Scroll-Container einzurichten und jedes separate Inhaltselement, das Sie scrollen möchten, als Snap-Ziel festzulegen. Wenn dies der Fall ist, wird durch Aktivieren eines Scroll-Buttons der Inhalt zu dem Snap-Ziel gescrollt, das eine "Seite" entfernt ist. Während die Scroll-Buttons auch ohne Scroll-Snapping funktionieren, könnte das gewünschte Ergebnis ausbleiben.

Wenn es nicht möglich ist, in eine bestimmte Scrollrichtung eines Scroll-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 :enabled und :disabled Pseudoklassen stylen.

Beispiele

Sehen Sie sich Erstellen von CSS-Carousels für weitere Carousel-Beispiele an.

Erstellen von Scroll-Buttons

In diesem Beispiel demonstrieren wir, wie man Scroll-Buttons auf einem CSS-Carousel erstellt.

HTML

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

<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 konvertieren unser <ul> in ein Carousel, indem wir das display auf flex setzen, wodurch eine einzelne, nicht umgebrochene Reihe von <li>-Elementen entsteht. Die Eigenschaft overflow-x wird auf auto gesetzt, was bedeutet, dass, wenn die Elemente ihren Container auf der x-Achse überfüllen, der Inhalt horizontal scrollt. Wir konvertieren dann das <ul> in einen Scroll-Snap-Container, um sicherzustellen, dass Elemente immer an ihren Platz schnappen, 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, indem wir die flex-Eigenschaft verwenden, um sie auf 100 % der Containerbreite zu setzen. Der scroll-snap-align Wert start sorgt dafür, dass die linke Seite des am weitesten links sichtbaren Elements zur linken Kante des Containers schnappen, wenn der Inhalt gescrollt wird.

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

Erstellen der Scroll-Buttons

Zuerst werden alle Scroll-Buttons mit einigen einfachen Stilen adressiert, sowie Stile basierend auf verschiedenen Zuständen angewendet. Es ist wichtig, :focus-Stile für Tastaturbenutzer zu setzen. Da Scroll-Buttons automatisch auf disabled gesetzt werden, wenn in diese Richtung kein weiteres Scrollen 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 entsprechendes Icon auf den linken und rechten Scroll-Buttons über die content-Eigenschaft gesetzt, was auch dazu führt, dass die Scroll-Buttons generiert werden:

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

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

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

Ergebnis

Beachten Sie, wie die Scroll-Buttons unten links am Carousel erstellt werden. Versuchen Sie, diese zu drücken, um zu sehen, wie der Inhalt gescrollt wird.

Positionierung der Scroll-Buttons

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

CSS

Zunächst wird eine Referenz anchor-name auf das <ul> gesetzt, um es als benannten Anker zu definieren. Dann wird jedem Scroll-Button seine position auf absolute gesetzt 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-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 auf ihre Inset-Eigenschaften zur Handhabung der horizontalen Positionierung. 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 Platz zwischen dem Rand des Buttons und dem Rand des Carousels zu schaffen. Zum Beispiel wird der rechte Rand des linken Scroll-Buttons 45 Pixel rechts vom linken Rand 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
• Erstellen von CSS-Carousels
• CSS-Überlauf Modul
• CSS Ankerpositionierung Modul
• CSS Carousel Gallery über chrome.dev (2025)