::scroll-marker

Syntax

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

Beschreibung

Ein ::scroll-marker wird auf einem Element generiert, wenn die ::scroll-marker-content-Eigenschaft auf einen Wert ungleich none gesetzt wird und es einen Vorfahren-Scroll-Container mit einem Wert ungleich none der scroll-marker-group-Eigenschaft gibt (was bedeutet, dass ein ::scroll-marker-group-Pseudoelement generiert wird).

Das ::scroll-marker-group-Pseudoelement des Scroll-Containers enthält automatisch alle ::scroll-marker-Pseudoelemente, die auf dem Scroll-Container oder seinen Nachkommen generiert werden. Dadurch können sie als Gruppe positioniert und gestaltet werden und werden typischerweise verwendet, um in einem CSS-Karussell einen Scroll-Positions-Indikator zu erstellen. Die einzelnen Scroll-Marker können verwendet werden, um zu ihren zugehörigen Inhaltsobjekten zu navigieren.

Wenn auf einem Scroll-Container ein Container für Scroll-Marker-Gruppen mit der Eigenschaft scroll-marker-group erstellt wird, wird der Scroll-Container mit tablist/tab-Semantik gerendert. Sie können mit der Tastatur Tab dazu wechseln und dann zwischen den verschiedenen "Seiten" mit den linken und rechten (oder oben und unten) Pfeiltasten wechseln, was auch den Zustand der zugehörigen Scroll-Marker und Scroll-Tasten wie erwartet ändert. Die Scroll-Marker können auch normal zwischen den einzelnen Elementen angesprungen werden.

Beispiele

Andere Beispiele, die das ::scroll-marker-Pseudoelement verwenden, finden Sie unter Erstellen von CSS-Karussellen.

Erstellen von Scroll-Marker für Karussell

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 konvertieren unser <ul> in einen Scroll-Snapping-Überlaufcontainer, indem wir das display auf flex setzen und eine einzelne, 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 überlaufen, der Inhalt horizontal scrollt. Wir konvertieren dann das <ul> in einen Scroll-Snap-Container, wodurch sichergestellt wird, dass die Elemente immer einrasten, wenn der Container mit einem scroll-snap-type-Wert von mandatory gescrollt wird.

Wir erstellen einen Container für Scroll-Marker-Gruppen mit der Eigenschaft scroll-marker-group und platzieren ihn hinter allen Inhalten.

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

Anschließend gestalten wir die <li>-Elemente, indem wir die flex-Eigenschaft verwenden, um sie auf 33% der Breite des Containers einzustellen. Der scroll-snap-align-Wert von start bewirkt, dass die linke Seite des am weitesten links sichtbaren Elements an die linke Kante des Containers schnappt, 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 0.4em-Abstand zwischen jedem Marker anzuordnen:

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

Schließlich gestalten wir den Marker des aktuell gescrollten Elements anders als die anderen und richten uns an den Marker mit der :target-current-Pseudoklasse.

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

Ergebnis

Benutzerdefinierte Scroll-Marker-Nummerierung und Stil

Dieses Beispiel ist dasselbe wie das vorherige, außer dass wir etwas andere Stile auf die Scroll-Marker angewendet haben und CSS-Zähler verwendet haben, um die auf jedem Marker angezeigte Nummer zu inkrementieren. Die Unterschiede in der CSS werden im nächsten Abschnitt erklärt.

CSS

In diesem Beispiel legen wir einen Namen eines Zählers fest, den wir bei jedem <li> inkrementieren möchten — markers — und verwenden dazu die counter-increment-Eigenschaft:

li {
  counter-increment: markers;
}

Dann setzen wir die ::scroll-marker-Pseudoelement-content-Eigenschaft auf die counter()-Funktion und übergeben den markers-Zählername als Argument. Dies hat den Effekt, dass eine Nummer in jeden Marker eingefügt wird, die automatisch inkrementiert wird. Der Rest der Gestaltung ist rudimentär, zeigt jedoch, wie die Marker vollständig gestaltet 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 des ersten und letzten Listenelements auszuwählen, indem wir :first-child und :last-child in die Selektorkette einfügen. Wir geben dem ersten Marker den Textinhalt "First" und dem letzten 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-Pseudoklasse, um eine andere color und background-color auf den Marker des aktuell gescrollten Elements zu setzen, damit Benutzer wissen, welches Objekt 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
• Erstellen von CSS-Karussellen
• CSS-Listen und Zähler Modul
• CSS-Überlauf Modul
• CSS Carousel Gallery über chrome.dev (2025)