::scroll-marker-group

Syntax

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

Beschreibung

Das ::scroll-marker-group Pseudo-Element eines Scroll-Containers repräsentiert einen Scroll-Marker-Gruppencontainer. Dies ist ein Container, der automatisch alle auf sich selbst oder seinen Nachkommen generierten ::scroll-marker Pseudo-Elemente enthält. Dadurch können sie als Gruppe positioniert und gestaltet werden. Dieses Pseudo-Element wird typischerweise verwendet, um bei der Erstellung eines CSS-Karussells einen Scroll-Positionsindikator bereitzustellen. Die einzelnen Scroll-Markierungen können verwendet werden, um zu ihren zugehörigen Inhaltsobjekten 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 generiert wird. Der scroll-marker-group-Wert bestimmt, wo der Scroll-Marker-Gruppencontainer in der Tab-Reihenfolge und in der Layout-Box-Reihenfolge des Karussells erscheint (aber nicht in der DOM-Struktur) — before platziert ihn am Anfang, während after ihn am Ende platziert.

Als bewährte Methode für die Barrierefreiheit sollte die visuelle Position des Scroll-Marker-Gruppencontainers mit der Tab-Reihenfolge übereinstimmen. Wenn die Gruppe am Anfang des Inhalts positioniert wird, setzen Sie sie mit before am Anfang der Tab-Reihenfolge. Wenn die Gruppe am Ende des Inhalts positioniert wird, setzen Sie sie mit after am Ende der Tab-Reihenfolge.

Wenn ein Scroll-Marker-Gruppencontainer 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 Tab wechseln und dann mit den Links- und Rechts- (oder Auf- und Ab-) Pfeiltasten zwischen den verschiedenen "Seiten" wechseln, was auch den Zustand der zugehörigen Scroll-Markierungen und Scroll-Tasten wie erwartet ändert. Die Scroll-Markierungen können auch wie erwartet normal über die Tab-Taste durchlaufen werden.

Beispiele

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

Erstellung von Karussell-Scroll-Markierungen

Diese Demo zeigt ein Karussell mit einzelnen Seiten, wobei jedes Element die gesamte Seite einnimmt. Wir haben Scroll-Markierungen hinzugefügt, um den Benutzer zu ermöglichen, mit einem Klick auf eine Markierung zu einer beliebigen Seite zu navigieren.

HTML

Das HTML besteht aus einer ungeordneten Liste , wobei jeder Listeneintrag 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

Wir wandeln zuerst unsere <ul> in ein Karussell um, indem wir den display auf flex setzen, wodurch eine einzelne, nicht umschließende Zeile von <li>-Elementen entsteht. Die overflow-x-Eigenschaft wird auf auto gesetzt, was bedeutet, dass der Inhalt horizontal scrollt, wenn die Elemente an der x-Achse ihren Container überlaufen. Dann wandeln wir die <ul> in einen Scroll-Snap-Container um, der sicherstellt, dass die 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: "Helvetica", "Arial", 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, 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 beim Scrollen des Inhalts an die linke Kante des Containers anrastet.

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

Der nächsten Schritt besteht darin, die scroll-marker-group Eigenschaft der Liste auf after zu setzen, sodass das ::scroll-marker-group Pseudo-Element nach dem DOM-Inhalt der Liste in der Tab-Reihenfolge und der Layout-Box-Reihenfolge platziert wird; das bedeutet, dass es nach den Scroll-Schaltflächen kommt:

ul {
  scroll-marker-group: after;
}

Anschließend wird das ::scroll-marker-group Pseudo-Element der Liste mit Flexbox ausgelegt, wobei ein justify-content Wert von center und ein gap von 20px verwendet wird, sodass seine Kinder (die ::scroll-marker Pseudo-Elemente) in der Mitte des ::scroll-marker-group mit einem Abstand zwischen jedem positioniert sind.

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

Die Scroll-Markierungen selbst werden danach gestylt. Das Aussehen jeder Markierung wird durch die Einstellungen von width, height, background-color, border und border-radius gehandhabt, 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 die Scroll-Markierung auszuwählen, die der aktuell sichtbaren "Seite" entspricht und zeigt, wie weit der Benutzer durch den Inhalt gescrollt hat. In diesem Fall setzen wir die background-color auf black, sodass sie als ausgefüllter Kreis gestylt wird.

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

Ergebnis

Positionieren des Scroll-Marker-Gruppencontainers mit Anker-Positionierung

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

CSS

Das ::scroll-marker-group Pseudo-Element der Liste wird relativ zum Karussell unter Verwendung der CSS Anker-Positionierung positioniert, indem der Gruppe ein Wert für position-anchor gegeben wird, der mit dem anchor-name der <ul> übereinstimmt. Wir positionieren dann die Gruppe relativ zum Scroll-Container in Blockrichtung, indem wir einen top Wert setzen, der eine anchor() Funktion enthält. Wir fügen auch einen justify-self Wert von anchor-center hinzu, der die Gruppe im 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-target-group
• ::scroll-button()
• ::scroll-marker
• ::column
• :target-current
• :target-before
• :target-after
• Erstellung von CSS-Karussells
• CSS-Anker-Positionierung Modul
• CSS-Überlauf Modul
• CSS-Karussell-Galerie über chrome.dev (2025)