::scroll-marker - Sélecteur CSS

Pseudo-élément ::scroll-marker - Description

⚠

Ces sélecteurs ne sont pour l'instant reconnue que par Chrome   et Edge   (2025).

Le sélecteur ::scroll-marker offre un nouveau moyen de parcourir le contenu dans un conteneur avec défilement. Voici un exemple avec une série d'images. Le conteneur est défilant mais la barre d'outils a été cachée, il n'est donc plus possible de l'utiliser avec la souris. Vous pouvez toujours faire défiler avec le clavier sur un PC de bureau, ou avec la doigt sur un terminal portable. Mais vous pouvez aussi cliquer sur les points rouges situés au dessus. Ces points rouges sour les marqueurs de défilement (scroll-marker).

⚠ Utilisez Chrome   ou Edge   pour voir le fonctionnement. Les autres navigateurs ne sont pas encore compatibles (2025).

Les marqueurs de défilement sont particulièrement efficaces en association avec les défilements avec accrochages (Scroll Snap). Pour cette raison vous verrez aussi dans le code de l'exemple des propriétés typiques de défilement avec accrochages.

• L'élément id="description1" est le conteneur. On reconnaît la propriété overflow. La propriété scroll-marker-group est obligatoire, elle active les marqueurs, et en même temps les positionne avant notre conteneur.
  Quant à la propriété scroll-snap-type c'est une propriété en rapport avec les défilement avec accrochages.
• Les div internes contiennent les images. Ils n'ont que des propriétés classiques ou des propriétés relative au défilement avec accrochages.
• Vient ensuite le sélecteur ::scroll-marker-group qui cible le conteneur de points rouges.
• Le pseudo-élément ::scroll-marker cible un des points rouges. Vous noterez la propriété content qui est obligatoire, même avec une valeur vide. Les autres propriétés sont là pour formater les points.
• Enfin la pseudo-classe [:target-current}, enfant de ::scroll-marker , qui cible le point dont la page est actuellement affiché à l'écran.

Pour de plus amples renseignements, nous vous invitons à consulter la page sur la propriété scroll-marker-group.

Les sélecteurs en rapport avec les marqueurs.

• ::scroll-marker { ... };

  Ce pseudo-élément cible individuellement les marqueurs de défilement.

  

• ::scroll-marker-group: { ... };

  Ce pseudo élément cible le conteneur des marqueurs de défilement.

  

• :target-current: { ... };

  Cette pseudo-classe cible le marqueur de défilement dont la page est affichée.

  

Pseudo-élément ::scroll-marker - Exemples d'utilisation.

Un système d'onglets.

Il est tout à fait facile de construire un système d'onglets en utilisant les marqueurs de défilement. Il y a plus de travail pour positionner les onglets et les formater que pour les gérer.

Sur cet exemple, les images sont alignés les unes à la suite des autres horizontalement. La propriété white-space évite les retours à la ligne. On retrouve la propriété scroll-marker-group, indispensable au fonctionnement.
Comme d'habitude, le pseudo-élément ::scroll-marker-group est utilisé pour positionner les onglets, ici au dessus de la zone d'images.
Le pseudo-élément ::scroll-marker formate chacun des onglets. On notera la propriété content qui récupère son libellé dans l'attribut alt des images.
Enfin la pseudo-classe :target-current met un arrière-plan jaune lorsqu'elle est activée, et une opacité réduite dans le cas contraire.

⚠ Nous vous rappelons que cet exemple ne fonctionne pour le moment (2025) que sur Edge   et Chrome  . Sur les autres navigateurs vous pouvez néanmoins consulter le code.

Pseudo-élément ::scroll-marker - Compatibilité des navigateurs.

1

Pseudo-élément
::scroll-marker

2

Pseudo-élément
::scroll-marker-group

3

Pseudo-classe
:target-current

Estimation de la prise en charge globale.

64%

20%

20%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Safari

Safari sur IOS

Samsung Internet

Chrome

Firefox

Edge

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Pseudo-élément ::scroll-marker - Historique.

• Module CSS - Débordements - Niveau 5

  Introduction des pseudo-éléments ::scroll-marker et ::scroll-marker-group, ainsi que de la pseudo-classe :target-current dans ce module de spécification.
  

  17 Décembre 2024

  Document de travail.

  

  

  

Voir aussi, à propos des débordements.

Sélecteurs :

Propriétés :