scroll-marker-group CSS property

Syntax

/* Single values */
scroll-marker-group: before;
scroll-marker-group: after;
scroll-marker-group: none;

/* Global values */
scroll-marker-group: inherit;
scroll-marker-group: initial;
scroll-marker-group: revert;
scroll-marker-group: revert-layer;
scroll-marker-group: unset;

Werte

Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben:

after

Ein ::scroll-marker-group Pseudoelement wird als Geschwister der Kind-DOM-Elemente des Scroll-Containers generiert, unmittelbar vor ihnen und allen generierten ::scroll-button() Pseudoelementen. Es erscheint am Ende der Tabulator- und Layout-Box-Reihenfolge des Containers (aber nicht in der DOM-Struktur).

before

Ein ::scroll-marker-group Pseudoelement wird als Geschwister der Kind-DOM-Elemente des Scroll-Containers generiert, unmittelbar vor ihnen und allen generierten ::scroll-button() Pseudoelementen. Die Scrollmarkierungsgruppe erscheint am Anfang der Tabulator- und Layout-Box-Reihenfolge des Containers.

none

Kein ::scroll-marker-group Pseudoelement wird auf dem Element generiert. Dies ist der Standardwert.

Formale Definition

Formale Syntax

scroll-marker-group = 
  none                                        |
  [ [ before | after ] || [ links | tabs ] ]  

Beispiele

Siehe CSS-Karussells erstellen für vollständige Beispiele, die die scroll-marker-group Eigenschaft verwenden.

Platzierung der Scrollmarkierungen

In diesem Beispiel demonstrieren wir die drei Werte der scroll-marker-group Eigenschaft.

HTML

Wir haben eine grundlegende HTML-<ul>-Liste mit mehreren <li> Listenelementen.

<fieldset>
  <legend>Select <code>scroll-marker-group</code> value:</legend>
  <label><input type="radio" name="p" value="before" />before</label>
  <label><input type="radio" name="p" value="after" checked />after</label>
  <label><input type="radio" name="p" value="none" />none</label>
</fieldset>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
</ul>

CSS

Wir wandeln unser <ul> in ein Karussell um, indem wir display auf flex setzen und eine einzelne, nicht umbruchende Reihe von <li>-Elementen erstellen. Die overflow-x Eigenschaft ist auf auto gesetzt, was bedeutet, dass wenn die Elemente ihren Container auf der X-Achse überfließen, der Inhalt horizontal scrollt. Wir machen dann aus dem <ul> einen Scroll-Snap-Container, um sicherzustellen, dass die Elemente immer an ihrem Platz einrasten, wenn der Container mit einem scroll-snap-type Wert von mandatory gescrollt wird.

Wir erstellen einen Scroll-Markierungsgruppen-Container mit der scroll-marker-group Eigenschaft und platzieren die Gruppe nach dem gesamten Inhalt.

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

  scroll-marker-group: after;
}

Als nächstes gestalten wir die <li> Elemente und verwenden die flex Eigenschaft, um sie auf 33% der Breite des Containers zu setzen. Der scroll-snap-align Wert von start sorgt dafür, 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: #eeeeee;
  flex: 0 0 33%;
  scroll-snap-align: start;
  text-align: center;
  line-height: 5;
}

Wir verwenden dann das ::scroll-marker Pseudoelement, um für jedes Listenelement einen quadratischen Marker mit rotem Rand zu erstellen, und wenden Stile auf das ::scroll-marker-group Pseudoelement an, um die Scroll-Markierungen in einer Reihe mit einem 0.2em Abstand zwischen ihnen anzuordnen.

li::scroll-marker {
  content: " ";
  border: 1px solid red;
  height: 1em;
  width: 1em;
}

::scroll-marker-group {
  display: flex;
  gap: 0.2em;
}

Schließlich, um eine gute Benutzererfahrung zu gewährleisten, gestalten wir den Marker des aktuell gescrollten Elements anders als die anderen, indem wir den Marker mit der :target-current Pseudoklasse anvisieren.

::scroll-marker:target-current {
  background: red;
}

fieldset {
  width: 20em;
}

label {
  font-family: monospace;
  display: block;
}

:has([value="before"]:checked) ul {
  scroll-marker-group: before;
}
:has([value="after"]:checked) ul {
  scroll-marker-group: after;
}

:has([value="none"]:checked) ul {
  scroll-marker-group: none;
}

Ergebnis

Beachten Sie die Platzierung des Scroll-Markierungsgruppen-Containers. Sehen Sie, wie sich die Tabulatorreihenfolge bei before im Gegensatz zu after ändert, und beachten Sie, wie die Gruppe verschwindet, wenn der Wert auf none gesetzt wird.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• scroll-target-group
• ::scroll-button()
• ::scroll-marker-group
• ::scroll-marker
• :target-current
• :target-before
• :target-after
• Erstellen von CSS-Karussells
• CSS-Überlauf Modul
• CSS-Karussell-Galerie über chrome.dev (2025)