Scroll-marker-group - Propriété CSS

Schéma de la syntaxe de scroll-marker-group.

Description de la propriété scroll-marker-group.

⚠

Cette propriété n'est pour l'instant reconnue que par Edge   et Chrome   (2025).

La propriété scroll-marker-group propose un système autre que les barres de défilement : un index est construit, chaque élément de cet index donne accès à une page du contenu défilant.

Sur le code de l'exemple ci-dessous (que vous pouvez consulter en cliquant sur le bouton), la propriété scroll-marker-group est affectée au conteneur défilant. Celui-ci reçoit également la propriété overflow:hidden pour masquer et le contenu qui déborde, et les barres de défilement. Il reçoit également la propriété white-space:nowrap pour éviter que les images ne retournent à la ligne.

La propriété scroll-marker-group a deux roles :

• Activer le défilement par des marqueurs.
• Indiquer si ces marqueurs doivent se trouver avant ou après le conteneur défilant. Ici ils sont avant.

⚠ N'oubliez pas que cet exemple ne fonctionne que sur Edge   et Chrome  .

Remarque : il n'est pas indispensable de faire disparaître la barre de défilement. Elle peut être maintenue : le défilement sera alors possible à partir de cette barre, ou à partir des marqueurs de défilement (quelque fois appelés marque-page).

Voici les propriétés et sélecteurs à connaître pour mettre en œuvre les marqueurs de défilement.

Valeurs pour scroll-marker-group.

• scroll-marker-group: none;

  Le système de défilement par marqueurs est désactivé.

  Contenu défilant (simulation)
  scroll-marker-group:none;
• scroll-marker-group: before;

  Le système de défilement par marqueurs est activé, et les marqueurs sont positionnés avant le conteneur défilant.

  Contenu défilant (simulation)
  scroll-marker-group:before;
• scroll-marker-group: after;

  Le système de défilement par marqueurs est activé, et les marqueurs sont positionnés après le conteneur défilant.

  Contenu défilant (simulation)
  scroll-marker-group:after;
• scroll-marker-group: initial; (none) scroll-marker-group: inherit; scroll-marker-group: revert; scroll-marker-group: revertLayer; scroll-marker-group: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de scroll-marker-group.

La propriété scroll-marker-group peut être animée de façon discrète : elle passe d'une valeur à l'autre brutalement.

Le fonctionnement semble quelque peu aléatoire. Bogue ?
⚠ Ne fonctionne pas sur Firefox  .

Exemple interactif avec la propriété scroll-marker-group.

La propriété scroll-marker-group accepte peu de valeurs.
Il a fallu ajuster un peu les marges du conteneur pour que les marqueurs de défilement se positionnent correctement.

Compatibilité des navigateurs avec scroll-marker-group.

1

Propriété
scroll-marker-group

Estimation de la prise en charge globale.

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

Histoire de la propriété scroll-marker-group.

• Module CSS - Débordements - Niveau 5

  Introduction de la notion de marqueurs de défilement et de la propriété scroll-marker-group.
  

  17 Décembre 2024

  Document de travail.

  

  

  

Voir aussi, à propos des débordements.

Le module de spécification CSS Overflow Module s'occupe de tout ce qui est la gestion des débordements. On y retrouve les propriétés pour afficher ou masquer les barres de défilement, et plus récemment, tout ce qui concerne les marqueurs de défilement.

Sélecteurs :

Propriétés :