Das::scroll-marker-groupCSSPseudo-Element wird innerhalb einesScroll-Containers generiert und enthält alle::scroll-marker Pseudo-Elemente, die bei Nachkommen des Scroll-Containers generiert werden.

Syntax

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

Beschreibung

Das::scroll-marker-group Pseudo-Element eines Scroll-Containers repräsentiert einenScroll-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 diescroll-marker-group-Eigenschaft auf einen Wert ungleichnone gesetzt haben, damit das::scroll-marker-group Pseudo-Element generiert wird. Derscroll-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ährendafter 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 mitbefore am Anfang der Tab-Reihenfolge. Wenn die Gruppe am Ende des Inhalts positioniert wird, setzen Sie sie mitafter am Ende der Tab-Reihenfolge.

Wenn ein Scroll-Marker-Gruppencontainer auf einem Scroll-Container mit derscroll-marker-group Eigenschaft erstellt wird, wird der Scroll-Container mittablist/tab Semantik gerendert. Sie können mit der Tastatur zu ihmTab 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

SieheErstellung 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 einerungeordneten Liste , wobei jederListeneintrag 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 dendisplay aufflex setzen, wodurch eine einzelne, nicht umschließende Zeile von<li>-Elementen entsteht. Dieoverflow-x-Eigenschaft wird aufauto gesetzt, was bedeutet, dass der Inhalt horizontal scrollt, wenn die Elemente an der x-Achse ihren Container überlaufen. Dann wandeln wir die<ul> in einenScroll-Snap-Container um, der sicherstellt, dass die Elemente immer einrasten, wenn der Container mit einemscroll-snap-type-Wert vonmandatory 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 dieflex-Eigenschaft verwenden, um sie100% der Breite des Containers ausfüllen zu lassen. Derscroll-snap-align Wert vonstart 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, diescroll-marker-group Eigenschaft der Liste aufafter 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 einjustify-content Wert voncenter und eingap von20px 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 vonwidth,height,background-color,border undborder-radius gehandhabt, aber wir müssen auch einen Wert ungleichnone für diecontent 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 diebackground-color aufblack, 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 derCSS-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ürposition-anchor gegeben wird, der mit demanchor-name der<ul> übereinstimmt. Wir positionieren dann die Gruppe relativ zum Scroll-Container in Blockrichtung, indem wir einentop Wert setzen, der eineanchor() Funktion enthält. Wir fügen auch einenjustify-self Wert vonanchor-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)