::scroll-marker

Syntax

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

Beschreibung

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

Das ::scroll-marker-group-Pseudoelement des Scroll-Containers enthält automatisch alle ::scroll-marker-Pseudoelemente, die auf dem Scroll-Container oder seinen Nachfahren generiert werden. Dadurch können sie als Gruppe positioniert und angeordnet werden und wird typischerweise verwendet, um bei der Erstellung eines CSS-Karussells einen Scroll-Positionsanzeiger zu erstellen. Die einzelnen Scroll-Marker können verwendet werden, um zu ihren zugehörigen Inhaltselementen zu navigieren.

Wenn ein Container für Scroll-Marker-Gruppen auf einem Scroll-Container mit der scroll-marker-group-Eigenschaft erstellt wird, wird der Scroll-Container mit tablist/tab-Semantik gerendert. Sie können mit der Tastatur zu ihm wechseln, dann zwischen den verschiedenen "Seiten" mit den Pfeilen nach links und rechts (oder nach oben und unten) navigieren, was auch den Zustand der zugehörigen Scroll-Marker und Scroll-Buttons wie erwartet ändert. Die Scroll-Marker können ebenfalls normal zwischenzeitlich angesteuert werden.

Beispiele

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

Scroll-Marker in einem Karussell erstellen

In diesem Beispiel demonstrieren wir, wie man Scroll-Marker in einem CSS-Karussell erstellt.

HTML

Wir haben eine grundlegende 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 verwandeln unsere <ul> in einen Scroll-Snapping-Overflow-Container, indem wir das display auf flex setzen, um eine einzelne, nicht-umhüllende Zeile von <li>-Elementen zu erstellen. Die overflow-x-Eigenschaft wird auf auto gesetzt, was bedeutet, dass, wenn die Elemente ihren Container auf der x-Achse überfluten, der Inhalt horizontal scrollt. Dann verwandeln wir die <ul> in einen Scroll-Snap-Container, um sicherzustellen, dass die Elemente immer an ihrem Platz 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 scroll-marker-group-Eigenschaft, indem wir ihn nach dem 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 gestalten wir die <li>-Elemente, indem wir die flex-Eigenschaft verwenden, um sie auf 33% der Breite des Containers festzulegen. Der scroll-snap-align-Wert von start bewirkt, dass die linke Seite des am weitesten links sichtbaren Elements bei einem Scrollen des Inhalts an die linke Kante des Containers schnappt.

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

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

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

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

::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, indem wir den Marker mit der :target-current-Pseudoklasse anvisieren.

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

Ergebnis

Individuelle Nummerierung und Stile für Scroll-Marker

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

CSS

In diesem Beispiel setzen wir einen Namen für einen Zähler, den wir bei jedem <li> erhöhen möchten — markers — mit der counter-increment-Eigenschaft:

li {
  counter-increment: markers;
}

Dann setzen wir die content-Eigenschaft des ::scroll-marker-Pseudoelements auf die counter()-Funktion, indem wir der Funktion den markers-Zählernamen als Argument übergeben. Dies hat den Effekt, dass eine Nummer in jeden Marker eingefügt wird, die sich automatisch erhöht. Der Rest der Stile ist grundlegend, aber es veranschaulicht, 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 des ersten und letzten Listenelements zu selektieren, indem wir :first-child und :last-child in die Selektorenkette 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-Pseudoklasse, um auf dem Marker des aktuell gescrollten Elements eine andere color und background-color festzulegen, damit die 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
• Creating CSS carousels
• CSS lists and counters Modul
• CSS overflow Modul
• CSS Carousel Gallery über chrome.dev (2025)