::scroll-marker

Syntaxe

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

Description

Un ::scroll-marker est généré sur un élément lorsque la propriété content de ::scroll-marker est définie sur une valeur différente de none, et que l'élément possède un ancêtre, conteneur de défilement, avec une valeur scroll-marker-group différente de none (ce qui signifie qu'il générera un pseudo-élément ::scroll-marker-group).

Le pseudo-élément ::scroll-marker-group du conteneur de défilement contient automatiquement tout pseudo-élément ::scroll-marker généré sur le conteneur ou ses descendants. Cela permet de les positionner et de les disposer comme un groupe, généralement utilisé lors de la création d'un carrousel CSS pour générer un indicateur de position de défilement. Les marqueurs individuels peuvent être utilisés pour naviguer vers leurs éléments de contenu associés.

En termes d'accessibilité, le groupe de marqueurs de défilement et les marqueurs qu'il contient sont rendus avec les sémantiques tablist/tab. Lorsque vous utilisez Tab pour atteindre le groupe, il se comporte comme un seul élément (c'est-à-dire qu'une autre pression sur la touche Tab passera au prochain élément), et vous pouvez naviguer entre les différents marqueurs à l'aide des flèches gauche et droite (ou haut et bas).

Exemples

Voir Créer des carrousels en CSS pour d'autres exemples utilisant le pseudo-élément ::scroll-marker.

Créer des marqueurs de défilement de carrousel

Dans cet exemple, nous montrons comment créer des marqueurs de défilement sur un carrousel CSS.

HTML

Nous avons une liste <ul> HTML de base avec plusieurs éléments <li>.

<ul>
  <li>Élément 1</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
  <li>Élément 4</li>
  <li>Élément 5</li>
  <li>Élément 6</li>
  <li>Élément 7</li>
  <li>Élément 8</li>
</ul>

CSS

Nous transformons notre <ul> en conteneur de défilement avec accrochage en définissant display sur flex, créant une seule ligne non enroulée d'éléments <li>. La propriété overflow-x est définie sur auto, ce qui signifie que si les éléments débordent de leur conteneur sur l'axe x, le contenu défile horizontalement. Nous convertissons ensuite le <ul> en conteneur d'ancrage au défilement, garantissant que les éléments s'alignent toujours lorsqu'on fait défiler le conteneur avec une valeur scroll-snap-type de mandatory.

Nous créons un groupe de marqueurs de défilement avec la propriété scroll-marker-group, en plaçant le groupe après tout le contenu.

ul {
  display: flex;
  gap: 4vw;
  padding-left: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
}

Ensuite, nous mettons en évidence les éléments <li>, en utilisant la propriété flex pour les rendre à 33% de la largeur du conteneur. La valeur scroll-snap-align start permet d'aligner le côté gauche de l'élément visible le plus à gauche avec le bord gauche du conteneur.

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

Nous utilisons ensuite le pseudo-élément ::scroll-marker pour créer un marqueur carré pour chaque élément de liste avec une bordure rouge :

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

Nous appliquons également des mises en évidence au pseudo-élément ::scroll-marker-group afin de disposer les marqueurs de défilement au centre de la ligne, avec un espacement de 0.4em entre chacun :

::scroll-marker-group {
  display: flex;
  gap: 0.4em;
  place-content: center;
}

Enfin, nous mettons en évidence différemment le marqueur de l'élément actuellement défilé, en ciblant ce marqueur avec la pseudo-classe :target-current.

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

Résultat

Numérotation et style personnalisés des marqueurs de défilement

Cet exemple est identique au précédent, sauf que nous avons appliqué un style différent aux marqueurs de défilement et utilisé des compteurs CSS pour incrémenter le numéro affiché sur chaque marqueur. Les différences CSS sont expliquées dans la section suivante.

CSS

Dans cet exemple, nous définissons un compteur nommé markers que nous voulons incrémenter sur chaque <li>, grâce à la propriété counter-increment :

li {
  counter-increment: markers;
}

Nous définissons ensuite la propriété content du pseudo-élément ::scroll-marker sur la fonction counter(), en lui passant le nom du compteur markers en argument. Cela insère un numéro dans chaque marqueur, qui s'incrémente automatiquement. Le reste du style est rudimentaire, mais il illustre comment les marqueurs peuvent être entièrement mis en évidence.

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;
}

Pour une autre personnalisation intéressante, nous incluons deux règles pour sélectionner le marqueur du premier et du dernier élément de la liste, en insérant respectivement :first-child et :last-child dans le sélecteur. Nous donnons au premier marqueur le texte « Premier » et au dernier le texte « Dernier ».

li:first-child::scroll-marker {
  content: "Premier";
}

li:last-child::scroll-marker {
  content: "Dernier";
}

Pour améliorer l'expérience utilisateur, nous appliquons une couleur différente aux marqueurs au survol (:hover) et utilisons la pseudo-classe :target-current pour définir une color et une background-color différentes sur le marqueur de l'élément actuellement affiché, afin que les utilisateur·ice·s sachent quel élément est visible :

::scroll-marker:hover {
  background-color: #ddcccc;
}

::scroll-marker:target-current {
  background-color: purple;
  color: white;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• scroll-marker-group
• ::scroll-button()
• ::scroll-marker-group
• :target-current
• Créer des carrousels en CSS
• Le module de listes et compteurs CSS
• Le module de débordement CSS
• Galerie de carrousels CSS ^(angl.) par chrome.dev (2025)