::scroll-marker

Ein ::scroll-marker wird auf einem Element generiert, wenn die ::scroll-marker-content-Eigenschaft auf einen Wert ungleich none gesetzt ist und es einen Vorfahren-Scroll-Container mit einem Wert ungleich none für die scroll-marker-group-Eigenschaft hat (was bedeutet, dass ein ::scroll-marker-group-Pseudo-Element generiert wird).

Das ::scroll-marker-group-Pseudo-Element des Scroll-Containers enthält automatisch alle ::scroll-marker-Pseudo-Elemente, die auf dem Scroll-Container oder seinen Nachkommen generiert werden. Dies ermöglicht, sie als Gruppe zu positionieren und anzuordnen und wird typischerweise verwendet, um einen Scoll-Positionsanzeiger in einem CSS-Karussell zu erstellen. Die einzelnen Scroll-Marker können verwendet werden, um zu ihren zugehörigen Inhaltsobjekten zu navigieren.

In Bezug auf Barrierefreiheit werden die Scroll-Marker-Gruppe und die darin enthaltenen Scroll-Marker mit tablist/tab-Semantik gerendert. Wenn Sie zur Gruppe Tab drücken, verhält es sich wie ein einzelnes Element (das heißt, ein weiteres Drücken der Tab-Taste geht an das nächste Element vorbei), und Sie können mit den linken und rechten (oder oberen und unteren) Pfeiltasten zwischen den verschiedenen Scroll-Markern wechseln.

Siehe Erstellen von CSS-Karussells für weitere Beispiele, die das ::scroll-marker-Pseudo-Element verwenden.

In diesem Beispiel demonstrieren wir, wie man Scroll-Marker auf 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 konvertieren unser <ul> in einen Scroll-Snapping-Overflow-Container, indem wir das display auf flex setzen, wodurch eine einzige, nicht umgebrochene Reihe von <li>-Elementen erstellt wird. Die overflow-x-Eigenschaft ist 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, um sicherzustellen, dass die Elemente immer einrasten, wenn der Container mit einem scroll-snap-type-Wert von mandatory gescrollt wird.

Wir erstellen eine Scroll-Marker-Gruppe mit der scroll-marker-group-Eigenschaft und platzieren die Gruppe nach dem gesamten Inhalt.

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, indem wir die flex-Eigenschaft verwenden, um sie auf 33% der Containerbreite zu setzen. Der scroll-snap-align-Wert von start bewirkt, dass die linke Seite des am weitesten links sichtbaren Elements an die linke Kante des Containers einrastet, wenn der Inhalt gescrollt wird.

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

Wir verwenden dann das ::scroll-marker-Pseudo-Element, 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 Stile auf das ::scroll-marker-group-Pseudo-Element an, um die Scroll-Marker in der Mitte der Reihe mit einem 0,4em-Abstand zwischen jedem anzuordnen:

::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

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

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

li {
  counter-increment: markers;
}

Wir setzen dann die ::scroll-marker-Pseudo-Element-content-Eigenschaft auf die counter()-Funktion, indem wir der Funktion den markers-Zählername als Argument übergeben. Dies hat den Effekt, dass eine Zahl in jeden Marker eingefügt wird, die sich automatisch erhöht. Der Rest der Gestaltung ist einfach, aber es veranschaulicht, 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: #eee;
}

Für eine weitere interessante Anpassung fügen wir zwei Regeln ein, um den Marker der ersten und letzten Listenelemente auszuwählen, indem wir :first-child und :last-child jeweils 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 beim Überfahren der Marker mit der Maus eine andere Farbe und verwenden die :target-current-Pseudo-Klasse, um eine andere color und background-color auf dem gerade gescrollten Element-Marker zu setzen, damit Benutzer wissen, welches Element gerade angezeigt wird:

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

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

Ergebnis

• scroll-marker-group
• ::scroll-button()
• ::scroll-marker-group
• :target-current
• Erstellen von CSS-Karussells
• CSS-Listen und Zähler Modul
• CSS Überlauf Modul
• CSS Karussell-Galerie via chrome.dev (2025)