::scroll-marker-group

Das ::scroll-marker-group-Pseudoelement eines Scroll-Containers repräsentiert eine Scroll-Marker-Gruppe. Dies ist ein Container, der automatisch alle ::scroll-marker-Pseudoelemente enthält, die an sich selbst oder seinen Nachkommen generiert werden. Dies ermöglicht es, sie als Gruppe zu positionieren und zu layouten und wird typischerweise verwendet, um ein CSS-Karussell zu erstellen, das einen Scrollpositionsindikator bietet. Die einzelnen Scroll-Marker können verwendet werden, um zu den zugehörigen Inhaltselementen zu navigieren.

Der Scroll-Container muss seine scroll-marker-group-Eigenschaft auf einen Wert ungleich none setzen, damit das ::scroll-marker-group-Pseudoelement generiert wird. Der Wert von scroll-marker-group bestimmt, wo die Scroll-Marker-Gruppe in der Tab- und Layoutboxreihenfolge des Karussells erscheint (aber nicht in der DOM-Struktur) — before platziert sie am Anfang, während after sie am Ende platziert.

Es ist eine bewährte Praxis, die visuelle Position der Scroll-Marker-Gruppe mit der Tab-Reihenfolge abzugleichen. Wenn Sie die Gruppe am Anfang des Inhalts positionieren, setzen Sie sie mit before an den Anfang der Tab-Reihenfolge. Wenn Sie die Gruppe am Ende des Inhalts positionieren, setzen Sie sie mit after an das Ende der Tab-Reihenfolge.

Im Hinblick auf die Barrierefreiheit werden die Scroll-Marker-Gruppe und die enthaltenen Scroll-Marker mit tablist/tab-Semantik gerendert. Wenn Sie mit Tab zur Gruppe wechseln, verhält sie sich wie ein einzelnes Element (das heißt, ein weiteres Drücken der Tab-Taste wird die Gruppe überspringen und zum nächsten Element wechseln), und Sie können mit den Pfeiltasten links und rechts (oder auf und ab) zwischen den verschiedenen Scroll-Markern navigieren.

Sehen Sie Erstellen von CSS-Karussells für weitere Beispiele, die das ::scroll-marker-Pseudoelement verwenden.

Dieses Demo ist ein Karussell aus einzelnen Seiten, wobei jedes Element die volle Seite einnimmt. Wir haben Scroll-Marker hinzugefügt, um dem Benutzer zu ermöglichen, mit einem Klick auf einen Marker zu einer beliebigen Seite zu navigieren.

HTML

Das HTML besteht aus einer ungeordneten Liste, wobei jedes Listenelement ein Beispielinhalt enthält:

<ul>
  <li>
    <h2>Page 1</h2>
  </li>
  <li>
    <h2>Page 2</h2>
  </li>
  <li>
    <h2>Page 3</h2>
  </li>
  <li>
    <h2>Page 4</h2>
  </li>
</ul>

CSS

Zuerst verwandeln wir unser <ul> in ein Karussell, indem wir display auf flex setzen, wodurch eine einzelne, nicht umgebrochene Zeile von <li>-Elementen erstellt wird. Die Eigenschaft overflow-x ist auf auto gesetzt, was bedeutet, dass sich der Inhalt horizontal scrollt, wenn die Elemente ihren Container auf der x-Achse überlaufen. Wir verwandeln das <ul> dann in einen Scroll-Snap-Container, um sicherzustellen, dass Elemente immer einrasten, wenn der Container mit einem scroll-snap-type-Wert von mandatory gescrollt wird.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

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

Als nächstes gestalten wir die <li>-Elemente, indem wir die flex-Eigenschaft verwenden, um sie 100% der Breite des Containers ausfüllen zu lassen. 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: #eee;
  flex: 0 0 100%;
  height: 200px;
  padding-top: 20px;
  scroll-snap-align: start;
  text-align: center;
}

Als nächstes wird die scroll-marker-group-Eigenschaft der Liste auf after gesetzt, sodass das ::scroll-marker-group-Pseudoelement nach dem DOM-Inhalt der Liste in der Tab- und Layoutbox-Reihenfolge platziert wird; das bedeutet, dass es nach den Scroll-Schaltflächen erscheint:

ul {
  scroll-marker-group: after;
}

Als nächstes wird das ::scroll-marker-group-Pseudoelement der Liste mit Flexbox ausgelegt, unter Verwendung eines justify-content-Werts von center und eines gap von 20px, sodass seine Kinder (die ::scroll-marker-Pseudoelemente) mit einem Abstand dazwischen zentriert in der ::scroll-marker-group sind.

ul::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 20px;
}

Als nächstes werden die Scroll-Marker selbst gestylt. Das Aussehen eines jeden wird durch das Setzen von width, height, background-color, border und border-radius erreicht, aber wir müssen auch einen Wert ungleich none für die content-Eigenschaft setzen, damit sie tatsächlich generiert werden.

li::scroll-marker {
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 50%;
  content: "";
}

Schließlich wird die :target-current-Pseudoklasse verwendet, um den Scroll-Marker auszuwählen, der der aktuell sichtbaren „Seite“ entspricht, um hervorzuheben, wie weit der Benutzer durch den Inhalt gescrollt hat. In diesem Fall setzen wir die background-color auf black, sodass sie als gefüllter Kreis dargestellt wird.

li::scroll-marker:target-current {
  background-color: black;
}

Ergebnis

Dieses Beispiel erweitert das vorherige und zeigt die Verwendung der CSS-Ankerpositionierung, um die Scroll-Marker-Gruppe relativ zum Karussell zu positionieren.

CSS

Das ::scroll-marker-group-Pseudoelement der Liste wird relativ zum Karussell unter Verwendung der CSS-Ankerpositionierung positioniert, indem der Gruppe ein Wert für position-anchor gegeben wird, der mit dem anchor-name des <ul> übereinstimmt. Anschließend positionieren wir die Gruppe relativ zum Scroll-Container in der Blockrichtung durch Setzen eines top-Wertes, der eine anchor()-Funktion umfasst. Wir fügen auch einen justify-self-Wert von anchor-center hinzu, der die Gruppe im Inline-Richtung zentriert zum Scroll-Container ausrichtet.

ul {
  anchor-name: --myCarousel;
}

ul::scroll-marker-group {
  /* From the previous example */
  display: flex;
  gap: 20px;

  position: absolute;
  position-anchor: --myCarousel;
  top: calc(anchor(bottom) - 70px);
  justify-self: anchor-center;
}

Ergebnis

• scroll-marker-group
• ::scroll-button()
• ::scroll-marker
• ::column
• :target-current
• Erstellen von CSS-Karussells
• CSS-Ankerpositionierung Modul
• CSS Overflow Modul
• CSS Carousel Gallery über chrome.dev (2025)