La scrollbar-colorpropriété contrôle les deux couleurs d'une barre de défilement: la couleur du pouce et la couleur de la piste . scrollbar-colorfait partie du projet de niveau 1 du module Scrollbars du groupe de travail CSS, qui est toujours en cours de rédaction au moment de la rédaction de cet article.
Auparavant scrollbar-color, les développeurs n'avaient pas de moyen standard de modifier l'apparence par défaut des barres de défilement d'un navigateur sans recourir à la masquage de la barre de défilement overflow: hiddenet au rendu des barres de défilement basées sur JavaScript ou à l'aide d'attributs de barre de défilement préfixés par le navigateur. Avec scrollbar-color, d'autre part, nous pouvons styliser une barre de défilement pour qu'elle corresponde à un design sans avoir à refaire les fonctionnalités du navigateur ou à utiliser les préfixes de fournisseur.
.scrollable-element ( scrollbar-color: red yellow; )
scrollbar-coloracceptera également les valeurs de darket lightpour correspondre aux préférences d'un utilisateur s'il utilise quelque chose comme le mode sombre sur Mac OSX.
.scrollable-element ( scrollbar-color: dark; )Depuis mars 2019, la prise en charge darket les lightvaleurs ne sont disponibles dans aucun navigateur. est pris en charge dans Firefox. Consultez la section d'assistance du navigateur ci-dessous pour plus de détails.
Syntaxe
scrollbar-color: auto | dark | light | ;Valeurs
scrollbar-color accepte les valeurs suivantes:
autoest la valeur par défaut et rendra les couleurs standard de la barre de défilement pour l'agent utilisateur.darkindiquera à l'agent utilisateur d'utiliser des barres de défilement plus sombres pour correspondre au jeu de couleurs actuel.lightindiquera à l'agent utilisateur d'utiliser des barres de défilement plus claires pour correspondre au jeu de couleurs actuel.spécifie deux couleurs à utiliser pour la barre de défilement. La première couleur est pour le «pouce» ou la partie mobile de la barre de défilement qui apparaît en haut. La deuxième couleur est pour la «piste» ou la partie fixe de la barre de défilement.
Exemple
Cela combine la nouvelle syntaxe de spécification et les éléments préfixés WebKit.
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 91 * | 87 | 11 | 88 * | TP * |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 * | Non | 81 * | 14,0-14,4 * |
En rapport
scrollbar-gutterscrollbar-widthscrollbar
Ressources
- L'état actuel des barres de défilement de style
- Barres de défilement personnalisées dans WebKit
- Brouillon du module Scrollbars CSSWG
- Collection W3C de cas d'utilisation pour la modification de la barre de défilement
- L'avenir du CSS: barres de défilement sur dev.to
- Chromium Issue 891944