::scroll-marker-group

Syntax

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

Beschreibung

Das ::scroll-marker-group Pseudo-Element eines Scroll-Containers repräsentiert einen Scroll-Marker-Gruppen-Container. Dieser Container enthält automatisch alle auf sich selbst oder seinen Nachkommen erstellten ::scroll-marker Pseudo-Elemente. Dadurch können sie als Gruppe positioniert und gestaltet werden. Dieses Pseudo-Element wird typischerweise verwendet, wenn ein CSS-Karussell erstellt wird, um einen Scroll-Positionsanzeiger bereitzustellen. Die einzelnen Scroll-Marker 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-Gruppen-Container in der Tabulatorreihenfolge und der Layout-Box-Reihenfolge des Karussells erscheint (jedoch nicht in der DOM-Struktur) — before setzt es an den Anfang, während after es ans Ende setzt.

Als bewährte Barrierefreiheitspraxis sollten Sie die visuelle Darstellungsposition des Scroll-Marker-Gruppen-Containers mit der Tabulatorreihenfolge abgleichen. Wenn die Gruppe am Anfang des Inhalts positioniert wird, setzen Sie sie mit before an den Anfang der Tabulatorreihenfolge. Wenn die Gruppe am Ende des Inhalts positioniert wird, setzen Sie sie mit after ans Ende der Tabulatorreihenfolge.

Wenn ein Scroll-Marker-Gruppen-Container auf einem Scroll-Container mit der scroll-marker-group Eigenschaft erstellt wird, wird der Scroll-Container mit tablist/tab Semantiken gerendert. Sie können mit der Tastatur per Tab darauf zugreifen und dann mit den linken und rechten (oder oberen und unteren) Cursortasten zwischen den verschiedenen "Seiten" navigieren, was auch den Zustand der zugehörigen Scroll-Marker und Scroll-Tasten wie erwartet ändert. Die Scroll-Marker können auch normal durchgetabbt werden, wie erwartet.

Beispiele

Sehen Sie CSS-Karussells erstellen für weitere Beispiele, die das ::scroll-marker Pseudo-Element verwenden.

Karussell-Scroll-Marker erstellen

Dieses Demo ist ein Karussell einzelner Seiten, wobei jedes Element die volle Seite einnimmt. Wir haben Scroll-Marker eingeschlossen, die es dem Benutzer ermöglichen, mit einem Klick auf einen Marker zu einer beliebigen Seite zu navigieren.

HTML

Der HTML-Code 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 unsere <ul> in ein Karussell um, indem wir display auf flex setzen und eine einzelne, nicht umgebrochene Zeile von <li> Elementen erstellen. Die overflow-x Eigenschaft wird auf auto gesetzt, was bedeutet, dass, wenn die Elemente ihren Container auf der x-Achse überlaufen, der Inhalt horizontal scrollt. 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 gestalten wir die <li> Elemente, indem wir die flex Eigenschaft verwenden, um sie 100% der Breite des Containers einzunehmen. Der scroll-snap-align Wert von start bewirkt, dass die linke Seite des am weitesten nach links sichtbaren Elements an der linken Kante des Containers einrastet, wenn der Inhalt gescrollt wird.

li {
  list-style-type: none;
  background-color: #eeeeee;
  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 Pseudo-Element nach dem DOM-Inhalt und in der Layout-Box-Reihenfolge der Liste platziert 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 mit Flexbox gestaltet, mit einem justify-content Wert von center und einem gap von 20px, sodass seine Kinder (die ::scroll-marker Pseudo-Elemente) zentriert innerhalb des ::scroll-marker-group und mit einem Abstand zwischen jedem einzelnen liegen.

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

Als Nächstes werden die Scroll-Marker selbst gestaltet. Das Aussehen jedes einzelnen wird durch Setzen 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: "";
}

Zum Schluss wird die :target-current Pseudo-Klasse verwendet, um den Scroll-Marker auszuwählen, der der derzeit sichtbaren "Seite" entspricht, was hervorhebt, wie weit der Benutzer durch den Inhalt gescrollt hat. In diesem Fall setzen wir die background-color auf black, sodass er als ausgefüllter Kreis dargestellt wird.

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

Ergebnis

Positionierung des Scroll-Marker-Gruppen-Containers mit Anker-Positionierung

Dieses Beispiel erweitert das vorherige und demonstriert die Verwendung der CSS-Anker-Positionierung, um den Scroll-Marker-Gruppen-Container relativ zum Karussell zu positionieren.

CSS

Das ::scroll-marker-group Pseudo-Element der Liste wird relativ zum Karussell mittels 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 der Blockrichtung, indem wir einen top Wert festlegen, der eine anchor() Funktion enthält. Außerdem fügen wir einen justify-self Wert von anchor-center hinzu, der die Gruppe im Inline-Richtung des Scroll-Containers zentriert.

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
• CSS-Karussells erstellen
• CSS-Anker-Positionierung Modul
• CSS-Überlauf Modul
• CSS-Karussell-Galerie über chrome.dev (2025)