::scroll-button()

Syntax

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

Parameter

<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 und ermöglicht so das Anwenden von Stilen auf jeden von ihnen in einer einzigen Regel.

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 Block-End-Richtung scrollt.

block-start

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

inline-end

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

inline-start

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

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

Beschreibung

Die ::scroll-button() Pseudo-Elemente werden innerhalb eines Scroll-Containers nur dann generiert, wenn ihre content Eigenschaften auf einen anderen Wert als none gesetzt sind. Sie werden als Geschwister der untergeordneten DOM-Elemente des Scroll-Containers generiert, unmittelbar vor ihnen und vor jedem ::scroll-marker-group, das auf dem Container generiert wurde.

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() Pseudo-Elemente anzusprechen und alle Buttons in einer einzigen Regel zu gestalten.

Die generierten Buttons verhalten sich wie normale <button>-Elemente, einschließlich der gemeinsamen Standardstile des Browsers. 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 die angegebene Richtung um eine "Seite" gescrollt, ungefähr der Dimension des Scroll-Containers, ähnlich wie das Drücken der Tasten Bild auf und Bild ab.

Es wird empfohlen, CSS Scroll-Snapping auf dem Scroll-Container einzurichten und jedes einzelne Element des Inhalts, das Sie scrollen möchten, als Snap-Ziel festzulegen. In diesem Fall bewirkt das Aktivieren eines Scroll-Buttons, dass der Inhalt zum Snap-Ziel gescrollt wird, das eine "Seite" entfernt ist. Auch wenn die Scroll-Buttons ohne Scroll-Snapping funktionieren, könnte das Ergebnis nicht wie gewünscht sein.

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 Pseudo-Klassen :enabled und :disabled gestalten.

Beispiele

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

Erstellen von Scroll-Buttons

In diesem Beispiel zeigen wir, wie man Scroll-Buttons auf einem CSS-Karussell erstellt.

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

Styling des Karussells

Wir wandeln unser <ul> in ein Karussell um, indem wir das display auf flex setzen, um eine einzige, nicht umbrochene Reihe von <li>-Elementen zu erstellen. Die overflow-x Eigenschaft wird auf auto gesetzt, was bedeutet, dass der Inhalt horizontal scrollt, wenn die Elemente ihren Container auf der x-Achse überlaufen. Wir wandeln das <ul> dann in einen Scroll-Snap-Container um, wodurch sichergestellt wird, dass die 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 gestalten wir die <li>-Elemente, indem wir die flex Eigenschaft verwenden, um sie auf 100% der Breite des Containers einzustellen. Der scroll-snap-align Wert von start bewirkt, dass die linke Seite des am weitesten links sichtbaren Elements an der linken Kante des Containers einrastet, 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 grundlegenden Stilen sowie Styling basierend auf verschiedenen Zuständen angesprochen. Es ist wichtig, :focus Stile für Tastaturnutzer zu setzen. Da Scroll-Buttons automatisch auf disabled gesetzt werden, wenn in dieser Richtung keine weitere Scrollen möglich ist, verwenden wir die :disabled Pseudo-Klasse, um diesen Zustand zu erfassen.

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 geeignetes Symbol auf den linken und rechten Scroll-Buttons über die content-Eigenschaft gesetzt, die auch die Scroll-Buttons generiert:

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

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

Wir müssen keinen alternativen Text für die Symbole auf dem 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.

Positionierung der Scroll-Buttons

Das vorherige Beispiel funktioniert, aber die Buttons sind nicht ideal 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 erhält jeder Scroll-Button seine position auf absolute und seine position-anchor-Eigenschaft wird auf den anchor-name der Liste gesetzt, um die beiden miteinander zu assoziieren.

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

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

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

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

Dann setzen wir Werte auf ihre Insets-Eigenschaften, um die horizontale Positionierung zu bearbeiten. Wir verwenden anchor()-Funktionen, um die angegebenen Seiten der Buttons relativ zu den Seiten des Karussells zu positionieren. In jedem Fall wird die calc()-Funktion verwendet, um etwas Abstand zwischen dem Buttonrand und dem Karussellrand hinzuzufügen. Zum Beispiel wird der rechte Rand des linken Scroll-Buttons 45 Pixel rechts vom linken Rand des Karussells 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-Karussells
• CSS Overflow Modul
• CSS Ankerpositionierung Modul
• CSS Carousel Gallery via chrome.dev (2025)