::scroll-marker
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Das ::scroll-marker CSS Pseudoelement kann innerhalb beliebiger Elemente generiert werden und stellt dessen Scroll-Marker dar. Alle Elemente können ein ::scroll-marker-Pseudoelement haben, das in die ::scroll-marker-group des nächstgelegenen Scroll-Containers-Vorfahren eingefügt wird. Ein Scroll-Marker verhält sich wie ein Anker (<a>-Element), dessen Scroll-Ziel das Ursprungselement des Markers ist und den Scroll-Container zu diesem Element scrollt, wenn er aktiviert wird.
Syntax
::scroll-marker {
/* ... */
}
Beschreibung
Ein ::scroll-marker wird auf einem Element generiert, wenn die content-Eigenschaft des ::scroll-marker auf einen nicht none-Wert gesetzt ist und es einen Vorfahren-Scroll-Container mit einem nicht none-scroll-marker-group-Eigenschaftswert hat (was bedeutet, dass es ein ::scroll-marker-group-Pseudoelement generieren wird).
Das ::scroll-marker-group-Pseudoelement des Scroll-Containers enthält automatisch alle ::scroll-marker-Pseudoelemente, die auf dem Scroll-Container oder seinen Nachkommen generiert werden. Dies ermöglicht es, sie als Gruppe zu positionieren und zu layouten, und wird typischerweise verwendet, um einen CSS-Karussell zu erstellen, um einen Scroll-Positionsanzeiger zu erstellen. Die einzelnen Scroll-Marker können verwendet werden, um zu ihren zugehörigen Inhaltsobjekten zu navigieren.
Hinweis:
Alternativ kann ein Scroll-Marker-Gruppencontainer aus einem vorhandenen Elementcontainer erstellt werden, indem scroll-target-group verwendet wird; alle enthaltenen <a>-Elemente mit Fragmentkennungen, die auf Abschnitte der Seite verlinken, verhalten sich automatisch wie Scroll-Marker.
Wenn ein Scroll-Marker-Gruppencontainer auf einem Scroll-Container über die scroll-marker-group-Eigenschaft erstellt wird, wird der Scroll-Container mit tablist/tab-Semantik gerendert. Sie können mit der Tastatur Tab zu ihm navigieren und dann mit den Pfeiltasten links und rechts (oder hoch und runter) zwischen den verschiedenen "Seiten" wechseln, was auch den Zustand der zugehörigen Scroll-Marker und Scroll-Schaltflächen wie erwartet ändert. Die Scroll-Marker können auch normal durchgetabbt werden, wie erwartet.
Beispiele
Weitere Beispiele, die das ::scroll-marker-Pseudoelement verwenden, finden Sie unter Erstellen von CSS-Karussells.
Erstellen von Karussell-Scroll-Markern
In diesem Beispiel zeigen wir, wie Sie Scroll-Marker auf einem CSS-Karussell erstellen.
HTML
Wir haben eine grundlegende HTML-<ul>-Liste mit mehreren <li>-Listenelementen.
<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 konvertieren unser <ul> in einen Scroll-Snap-Overflow-Container, indem wir das display auf flex setzen, und eine einzelne, nicht umschließende Reihe von <li>-Elementen erstellen. Die overflow-x-Eigenschaft wird auf auto gesetzt, was bedeutet, dass der Inhalt horizontal scrollt, wenn die Elemente ihren Container auf der x-Achse überlaufen. Wir konvertieren dann das <ul> in einen Scroll-Snap-Container und stellen sicher, dass die Elemente immer in Position einrasten, wenn der Container mit einem scroll-snap-type-Wert von mandatory gescrollt wird.
Wir erstellen einen Scroll-Marker-Gruppencontainer mit der scroll-marker-group-Eigenschaft und platzieren ihn nach dem gesamten Inhalt.
ul {
display: flex;
gap: 4vw;
padding-left: 0;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-marker-group: after;
}
Als nächstes stylen wir die <li>-Elemente, indem wir die flex-Eigenschaft verwenden, um sie auf 33% der Breite des Containers zu setzen. Der scroll-snap-align-Wert von start führt dazu, dass die linke Seite des am weitesten links sichtbaren Elements an den linken Rand des Containers schnappt, wenn der Inhalt gescrollt wird.
li {
list-style-type: none;
background-color: #eeeeee;
flex: 0 0 33%;
height: 100px;
padding-top: 20px;
scroll-snap-align: start;
text-align: center;
}
Wir verwenden dann das ::scroll-marker-Pseudoelement, um für jedes Listenelement einen quadratischen Marker mit rotem Rand zu erstellen:
li::scroll-marker {
content: "";
border: 1px solid red;
height: 1em;
width: 1em;
}
Wir wenden auch Stile auf das ::scroll-marker-group-Pseudoelement an, um die Scroll-Marker in der Mitte der Reihe mit einem Abstand von 0.4em zwischen jedem auszulegen:
::scroll-marker-group {
display: flex;
gap: 0.4em;
place-content: center;
}
Abschließend stylen wir den Marker des derzeit gescrollten Elements anders als die anderen, indem wir den Marker mit der :target-current-Pseudoklasse ansprechen.
::scroll-marker:target-current {
background: red;
}
Ergebnis
Benutzerdefinierte Scroll-Marker-Nummerierung und Stil
Dieses Beispiel ist das gleiche wie das vorherige, außer dass wir einige unterschiedliche Stile auf die Scroll-Marker angewendet haben und CSS-Zähler verwendet haben, um die auf jedem Marker gezeigte Nummer zu inkrementieren. Die Unterschiede im CSS werden im nächsten Abschnitt erklärt.
CSS
In diesem Beispiel setzen wir einen Namen eines Zählers, den wir auf jedem <li> inkrementieren möchten — markers — durch Verwenden der counter-increment-Eigenschaft:
li {
counter-increment: markers;
}
Wir setzen dann die content-Eigenschaft des ::scroll-marker-Pseudoelements auf die counter()-Funktion und übergeben den markers-Zählernamen als Argument. Dies hat den Effekt, dass eine Nummer in jeden Marker eingefügt wird, die sich automatisch erhöht. Der Rest der Formatierung ist rudimentär, veranschaulicht jedoch, wie die Marker vollständig gestylt werden können.
li::scroll-marker {
content: counter(markers);
font-family: sans-serif;
width: fit-content;
height: 1em;
padding: 5px;
color: black;
text-decoration: none;
border: 2px solid rgb(0 0 0 / 0.15);
border-radius: 0.5em;
background-color: #eeeeee;
}
Für eine weitere interessante Anpassung fügen wir zwei Regeln ein, um den Marker der ersten und letzten Listenelemente auszuwählen, indem wir :first-child und :last-child in die Selektorkette einfügen. Wir geben dem ersten Marker den Textinhalt "First" und dem letzten Marker den Textinhalt "Last".
li:first-child::scroll-marker {
content: "First";
}
li:last-child::scroll-marker {
content: "Last";
}
Um die Benutzererfahrung zu verbessern, setzen wir eine andere Farbe auf den Markern bei :hover und verwenden die :target-current-Pseudoklasse, um auf dem Marker des gerade gescrollten Elements eine andere color und background-color zu setzen, damit Benutzer wissen, welches Element derzeit sichtbar ist:
::scroll-marker:hover {
background-color: #ddcccc;
}
::scroll-marker:target-current {
background-color: purple;
color: white;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Overflow Module Level 5 # scroll-marker-pseudo |