scrollbar-track-color

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété scrollbar-color permet à un auteur de définir la couleur utilisée pour le curseur et la piste (la ligne sur laquelle se déplace le curseur) de la barre de défilement.

Valeur introuvable dans la base de données

Syntaxe

/* Valeurs avec un mot-clé */
scrollbar-color: auto;
scrollbar-color: dark;
scrollbar-color: light;

/* Valeur de couleur */
/* La première cible le curseur et la seconde la piste */
/* type <color> */
scrollbar-color: rebeccapurple green;

/* Valeurs globales */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: unset;

Valeurs

<scrollbar-face-color>
Une valeur définissant la couleur.
 
auto

Utilise le rendu par défaut du système pour la piste de la barre de défilement si aucune autre couleur n'est indiquée pour la mise en forme CSS de la barre de défilement.

dark Affiche une barre de défilement sombre. Ce peut être la variante sombre fournie par le système sous-jacent ou une barre de défilement personnalisée avec des couleurs sombres.
light Affiche une barre de défilement claire. Ce peut être la variante claire fournie par le système sous-jacent ou une barre de défilement personnalisée avec des couleurs claires.
<color> <color> La première couleur est appliquée au curseur et la seconde à la piste sur laquelle se déplace le curseur.

Note : Pour toute valeur de scrollbar-color, les agents utilisateur doivent appliquer la valeur sur l'élément racine de la zone d'affichage (viewport).

Note : Si la couleur d'une partie de la barre de défilement est indiquée, les implémentations peuvent afficher une barre de défilement simple (plutôt que celle provenant du système) afin de la colorer avec la/les couleur(s) indiquée(s).

Syntaxe formelle

La syntaxe n'a pas été trouvée !

Exemples

CSS

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
}

HTML

<div class="scroller">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</div>

Résultat

Accessibilité

Lorsqu'on utilise scrollbar-color avec certains couleurs spécifiques, il est nécessaire de s'assurer que le contraste entre le curseur et la piste est suffisant. Lorsque des mots-clés sont utilisés, c'est à l'agent utilisateur de s'assurer que le contraste est suffisant. Voir les techniques WCAG 2.0 G183 : Utiliser un ratio de contraste de 3:1.

Spécifications

Spécification État Commentaires
CSS Scrollbars Level 1
La définition de 'scrollbar-color' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simple
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 64
Support complet 64
Support complet 63
Désactivée
Désactivée From version 63: this feature is behind the layout.css.scrollbar-colors.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Support complet 64
Support complet 64
Support complet 63
Désactivée
Désactivée From version 63: this feature is behind the layout.css.scrollbar-colors.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, lp177
Dernière mise à jour par : SphinxKnight,