::scroll-marker

Ein ::scroll-marker wird auf einem Element generiert, wenn die content-Eigenschaft des ::scroll-marker auf einen anderen Wert als none gesetzt ist und es einen Vorfahren-Scroll-Container mit einem anderen Wert als none für die scroll-marker-group-Eigenschaft hat (was bedeutet, dass es ein ::scroll-marker-group Pseudo-Element generieren 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 Nachfahren generiert werden. Dies ermöglicht, dass sie als Gruppe positioniert und ausgestaltet werden können, 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 Inhaltsitems zu navigieren.

In Bezug auf Barrierefreiheit werden die Scroll-Marker-Gruppe und die enthaltenen Scroll-Marker mit tablist/tab Semantiken gerendert. Wenn Sie zur Gruppe Tab, verhält sie sich wie ein Einzelitem (das heißt, ein weiteres Drücken der Tab-Taste wird die Gruppe zum nächsten Item weiterführen), und Sie können mit den Pfeiltasten links und rechts (oder oben und unten) zwischen den verschiedenen Scroll-Markern wechseln.

Siehe Erstellung von CSS-Karussells für weitere Beispiele mit dem ::scroll-marker Pseudo-Element.

In diesem Beispiel demonstrieren wir, wie Scroll-Marker auf einem CSS-Karussell erstellt werden.

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 unser <ul> in einen Scroll-Snapping-Überlauf-Container, indem wir das display auf flex setzen und eine einzelne, nicht umbruchende Zeile von <li> Elementen erstellen. Die overflow-x-Eigenschaft ist auf auto gesetzt, was bedeutet, dass der Inhalt horizontal scrollt, wenn die Elemente ihren Container auf der x-Achse überlaufen. Wir verwandeln dann das <ul> in einen Scroll-Snap-Container, um sicherzustellen, dass 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 gestalten wir die <li>-Elemente, indem wir die flex Eigenschaft verwenden, um sie 33% der Breite des Containers zu machen. Der scroll-snap-align Wert von start bewirkt, dass die linke Seite des linkesten sichtbaren Elements an die linke Kante des Containers schnallt, 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 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 Pseudo-Element an, um die Scroll-Marker in der Mitte der Reihe mit einem Abstand von 0.4em zwischen jedem anzuordnen:

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

Schließlich gestalten wir den Marker des derzeit 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 dasselbe wie das vorherige, außer dass wir einige unterschiedliche Stile auf die Scroll-Marker angewendet und CSS-Zähler verwendet haben, um die auf jedem Marker gezeigte Nummer zu inkrementieren. Die CSS-Unterschiede werden im nächsten Abschnitt erklärt.

In diesem Beispiel setzen wir einen Namen eines Zählers, den wir auf jedem <li> inkrementieren möchten — markers — mit der counter-increment Eigenschaft:

li {
  counter-increment: markers;
}

Dann setzen wir die content Eigenschaft des ::scroll-marker Pseudo-Elements auf die counter() Funktion, indem wir den markers Zählernamen als Argument übergeben. Dies hat den Effekt, eine Nummer in jeden Marker einzufügen, die sich automatisch inkrementiert. Der Rest des Stils ist rudimentär, illustriert 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: #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 in die Selektorkette 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 Marker des aktuell gescrollten Elements festzulegen, damit Benutzer wissen, welches Element derzeit 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
• Erstellung von CSS-Karussells
• CSS-Listen und Zähler Modul
• CSS Überlauf Modul
• CSS-Karussell-Galerie über chrome.dev (2025)