::scroll-marker CSS pseudo-element

Syntax

::scroll-marker {
  /* ... */
}

Beschreibung

Ein ::scroll-marker wird auf einem Element erzeugt, wenn die content-Eigenschaft des ::scroll-marker-Pseudoelements auf einen Wert ungleich none gesetzt wird und es in einem Scroll-Container-Vorfahren mit einem nicht-none scroll-marker-group-Eigenschaftswert vorhanden ist (was bedeutet, dass es ein ::scroll-marker-group-Pseudoelement erzeugen wird).

Das ::scroll-marker-group-Pseudoelement des Scroll-Containers enthält automatisch alle ::scroll-marker-Pseudoelemente, die am Scroll-Container oder dessen Nachkommen erzeugt werden. Dies ermöglicht es, sie als Gruppe zu positionieren und zu layouten und wird typischerweise bei der Erstellung eines CSS-Karussells verwendet, um einen Scroll-Positionsindikator zu erstellen. Die einzelnen Scroll-Marker können verwendet werden, um zu ihren zugehörigen Inhaltselementen zu navigieren.

Wenn ein Scroll-Marker-Gruppencontainer auf einem Scroll-Container mit der scroll-marker-group-Eigenschaft erstellt wird, wird der Scroll-Container mit tablist/tab-Semantik dargestellt. Sie können mit der Tastatur mit Tab dorthin gelangen und dann zwischen den verschiedenen "Seiten" mit den Pfeiltasten links und rechts (oder oben und unten) wechseln, wodurch auch der Zustand der zugehörigen Scroll-Marker und -Schaltflächen wie erwartet geändert wird. Die Scroll-Marker können, wie erwartet, auch normal weitergetabt werden.

Beispiele

Sehen Sie sich Creating CSS carousels für weitere Beispiele an, die das ::scroll-marker-Pseudoelement verwenden.

Erstellung von Karussell-Scroll-Markern

In diesem Beispiel zeigen wir, wie man Scroll-Marker 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

Wir wandeln unser <ul> in einen Überlaufcontainer mit Scroll-Snap, indem wir das display auf flex setzen und eine einzelne, nicht-umbruchende Zeile von <li>-Elementen erzeugen. Die overflow-x-Eigenschaft wird auf auto gesetzt, was bedeutet, dass, wenn die Elemente ihren Container auf der x-Achse überlaufen, der Inhalt horizontal scrollt. Dann wandeln wir das <ul> in einen Scroll-Snap-Container um, wodurch sichergestellt wird, dass die Elemente immer an Ort und Stelle einrasten, wenn der Container mit einem scroll-snap-type-Wert von mandatory gescrollt wird.

Wir erstellen einen Scroll-Marker-Gruppencontainer mit der scroll-marker-group-Eigenschaft, indem wir ihn hinter den gesamten Inhalt platzieren.

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

Als nächstes stylen wir die <li>-Elemente und verwenden die flex-Eigenschaft, um sie 33% der Breite des Containers einzunehmen. 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 33%;
  height: 100px;
  padding-top: 20px;
  scroll-snap-align: start;
  text-align: center;
}

Dann verwenden wir das ::scroll-marker-Pseudoelement, um für jedes Listenelement einen quadratischen Marker mit einem roten Rand zu erstellen:

li::scroll-marker {
  content: "";
  border: 1px solid red;
  height: 1em;
  width: 1em;
}

Wir wenden auch Stile auf das ::scroll-marker-group-Pseudoelement an, um die Scroll-Marker in der Mitte der Zeile mit einem Zwischenraum von 0.4em zwischen jedem Marker zu positionieren:

::scroll-marker-group {
  display: flex;
  gap: 0.4em;
  place-content: center;
}

Schließlich stylen wir den Marker des aktuell gescrollten Elements anders als die anderen, indem wir den Marker mit der :target-current-Pseudo-Klasse ansprechen.

::scroll-marker:target-current {
  background: red;
}

Ergebnis

Benutzerdefinierte Scroll-Marker-Nummerierung und -Stil

Dieses Beispiel ist dasselbe wie das vorherige, außer dass wir einige unterschiedliche Stile auf die Scroll-Marker angewendet haben und CSS-Zähler verwendet haben, um die auf jedem Marker angezeigte Zahl zu erhöhen. Die CSS-Unterschiede werden im nächsten Abschnitt erklärt.

CSS

In diesem Beispiel setzen wir einen Namen für einen Zähler, den wir auf jedem <li> erhöhen wollen — markers — unter Verwendung der counter-increment-Eigenschaft:

li {
  counter-increment: markers;
}

Wir setzen dann die content-Eigenschaft des ::scroll-marker-Pseudoelements auf die counter()-Funktion und übergeben dabei den markers-Zählernamen als Argument. Dies hat den Effekt, dass in jeden Marker eine Zahl eingefügt wird, die automatisch erhöht wird. Der Rest der Gestaltung ist rudimentär, aber es zeigt, wie die Marker vollständig gestylt werden können.

li::scroll-marker {
  content: counter(markers);
  font-family: sans-serif;
  width: fit-content;
  height: 1em;
  padding: 5px;
  color: black;
  text-decoration: none;
  border: 2px solid rgb(0 0 0 / 0.15);
  border-radius: 0.5em;
  background-color: #eeeeee;
}

Für eine weitere interessante Anpassung fügen wir zwei Regeln hinzu, um den Marker für das erste und das letzte Listenelement auszuwählen, indem wir jeweils :first-child und :last-child in die Selektor-Kette einfügen. Wir geben dem ersten Marker den Textinhalt "First" und dem letzten Marker den Textinhalt "Last".

li:first-child::scroll-marker {
  content: "First";
}

li:last-child::scroll-marker {
  content: "Last";
}

Um die Benutzererfahrung zu verbessern, setzen wir eine andere Farbe auf die Marker bei :hover und verwenden die :target-current-Pseudo-Klasse, um eine andere color und background-color auf dem aktuell gescrollten Element-Marker festzulegen, damit Benutzer wissen, welches Element gerade angezeigt wird:

::scroll-marker:hover {
  background-color: #ddcccc;
}

::scroll-marker:target-current {
  background-color: purple;
  color: white;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• scroll-marker-group
• scroll-target-group
• ::scroll-button()
• ::scroll-marker-group
• :target-current
• :target-before
• :target-after
• Creating CSS carousels
• CSS lists and counters module
• CSS overflow module
• CSS Carousel Gallery via chrome.dev (2025)