scrollbar-color
Baseline
2025
Nouvellement disponible
Depuis December 2025, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
La propriété CSS scrollbar-color définit la couleur de la piste et du curseur de la barre de défilement.
La piste désigne l'arrière-plan de la barre de défilement, qui reste généralement fixe quelle que soit la position de défilement.
Le curseur désigne la partie mobile de la barre de défilement, qui flotte généralement au-dessus de la piste.
Lorsque la valeur scrollbar-color est définie sur l'élément racine du document, les valeurs s'appliquent aux barres de défilement de la zone d'affichage (viewport en anglais).
Syntaxe
/* Valeurs avec un mot-clé */
scrollbar-color: auto;
/* Valeurs de type <color> */
scrollbar-color: rebeccapurple green; /* Deux couleurs valides.
La première s'applique au curseur de la barre de défilement, la seconde à la piste. */
/* Valeurs globales */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: revert;
scrollbar-color: revert-layer;
scrollbar-color: unset;
Valeurs
<scrollbar-color>-
Définit la couleur de la barre de défilement.
autoRendu par défaut de la plateforme pour la portion de la piste de la barre de défilement, en l'absence de toute autre propriété de couleur de barre de défilement. <color> <color>La première couleur est appliquée au curseur de la barre de défilement, la seconde à la piste.
Note :
@media (forced-colors: active) définit scrollbar-color sur auto.
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 (angl.).
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | boîtes défilantes |
| Héritée | oui |
| Valeur calculée | comme défini |
| Type d'animation | par type de valeur calculée |
Syntaxe formelle
scrollbar-color =
auto |
<color>{2}
Exemples
Coloration des barres de défilement
CSS
.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-color: #000077 #bada55;
}
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
Spécifications
| Spécification |
|---|
| CSS Scrollbars Styling Module Level 1 # scrollbar-color |
Compatibilité des navigateurs
Voir aussi
- Le module de débordement CSS
- Le module de mise en forme des barres de défilement CSS
- La propriété
overflow - La propriété
scrollbar-gutter - La propriété
scrollbar-width