::scroll-marker-group

Syntax

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

Beschreibung

Das ::scroll-marker-group Pseudo-Element eines Scroll-Containers repräsentiert eine Scroll-Marker-Gruppe. Dies ist ein Container, der automatisch alle ::scroll-marker Pseudo-Elemente enthält, die auf sich selbst oder seinen Nachfahren erzeugt werden. Dies ermöglicht es, sie als Gruppe zu positionieren und anzuordnen und wird typischerweise verwendet, um in einem CSS-Karussell einen Scrollpositionsindikator bereitzustellen. Die einzelnen Scroll-Marker können verwendet werden, um zu ihren zugehörigen Inhaltselementen zu navigieren.

Der Scroll-Container muss die scroll-marker-group Eigenschaft auf einen Wert ungleich none gesetzt haben, damit das ::scroll-marker-group Pseudo-Element erzeugt wird. Der scroll-marker-group Wert bestimmt, wo die Scroll-Marker-Gruppe in der Tab-Reihenfolge und Layout-Box-Reihenfolge (aber nicht in der DOM-Struktur) des Karussells erscheint — before platziert sie am Anfang, während after sie am Ende platziert.

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

In Bezug auf Barrierefreiheit werden die Scroll-Marker-Gruppe und die enthaltenen Scroll-Marker mit tablist/tab Semantik gerendert. Wenn Sie mit der Tab-Taste zur Gruppe navigieren, verhält sie sich wie ein einzelnes Element (das heißt, ein weiteres Drücken der Tab-Taste bewegt sich über die Gruppe zum nächsten Element), und Sie können mit den Pfeil-Tasten nach links und rechts (oder nach oben und unten) zwischen den verschiedenen Scroll-Markern wechseln.

Beispiele

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

Erstellen von Karussell-Scroll-Markern

Dieses Demo zeigt ein Karussell mit einzelnen Seiten, wobei jedes Element die ganze 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 einige Beispielinhalte 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 wandeln wir unser <ul> in ein Karussell um, indem wir die display Eigenschaft auf flex setzen, was eine einzige, nicht überlappende Zeile von <li> Elementen erstellt. Die overflow-x Eigenschaft wird auf auto gesetzt, was bedeutet, dass, wenn die Elemente ihren Container auf der x-Achse überschreiten, der Inhalt horizontal scrollt. Wir wandeln das <ul> dann in einen Scroll-Snap-Container um und stellen sicher, 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 stylen wir die <li> Elemente und verwenden die flex Eigenschaft, um sie 100% der Breite des Containers einzunehmen. Der scroll-snap-align Wert von start bewirkt, dass die linke Seite des am weitesten links sichtbaren Elements beim Scrollen des Inhalts an die linke Kante des Containers einrastet.

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

Anschließend wird die scroll-marker-group Eigenschaft der Liste auf after gesetzt, sodass das ::scroll-marker-group Pseudo-Element nach dem DOM-Inhalt der Liste in der Tab-Reihenfolge und Layout-Box-Reihenfolge positioniert wird; das bedeutet, dass es nach den Scroll-Tasten kommt:

ul {
  scroll-marker-group: after;
}

Als nächstes wird das ::scroll-marker-group Pseudo-Element der Liste mithilfe des Flexbox-Layouts positioniert, mit einem justify-content Wert von center und einem gap von 20px, sodass seine Kinder (die ::scroll-marker Pseudo-Elemente) zentriert innerhalb der ::scroll-marker-group mit einem Abstand zwischen jedem einzelnen positioniert sind.

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

Darüber hinaus werden die Scroll-Marker selbst gestylt. Das Aussehen jedes einzelnen wird durch die Einstellungen von width, height, background-color, border und border-radius gesteuert, aber wir müssen auch einen Wert ungleich none für die content Eigenschaft festlegen, damit sie tatsächlich generiert werden.

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

Abschließend wird die :target-current Pseudo-Klasse verwendet, um den Scroll-Marker auszuwählen, der der aktuell sichtbaren "Seite" entspricht, und anzuzeigen, wie weit der Benutzer durch den Inhalt gescrollt hat. In diesem Fall setzen wir die background-color auf black, sodass es als ausgefüllter Kreis erscheint.

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

Ergebnis

Positionierung der Scroll-Marker-Gruppe mit Anker-Positionierung

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

CSS

Das ::scroll-marker-group Pseudo-Element der Liste wird relativ zum Karussell mit CSS Anker-Positionierung positioniert, indem der Gruppe ein Wert für position-anchor gegeben wird, der mit dem anchor-name des <ul> übereinstimmt. Wir positionieren die Gruppe dann relativ zum Scroll-Container in der Blockrichtung, indem wir einen top Wert setzen, der eine anchor() Funktion enthält. Zudem fügen wir einen justify-self Wert von anchor-center hinzu, der die Gruppe in der Inline-Richtung im Zentrum des Scroll-Containers ausrichtet.

ul {
  anchor-name: --my-carousel;
}

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

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

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• scroll-marker-group
• ::scroll-button()
• ::scroll-marker
• ::column
• :target-current
• Erstellen von CSS-Karussellen
• CSS Anker-Positionierung Modul
• CSS Überlauf Modul
• CSS Karussell Galerie via chrome.dev (2025)