CSS Scrollbars

Le module de spécification CSS Scrollbars standardise la mise en forme des barres de défilement (scrollbar) notamment introduite en 2000 avec Windows IE 5.5.

Exemples

Dans l'exemple qui suit, on crée une barre de défilement fine avec une piste verte et un curseur violet.

CSS

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

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

Référence

Propriétés

Accessibilité

Lors du paramétrage des barres de défilement, on s'assurera que le contraste avec les éléments alentour est suffisant et que la surface d'interaction est suffisamment grande pour les personnes qui utilisent une interface tactile.

Spécifications

Spécification État Commentaires
CSS Scrollbars Level 1 Version de travail Définition initiale

Compatibilité des navigateurs

scrollbar-width

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
scrollbar-width
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-width.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 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-width.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é.

scrollbar-color

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
scrollbar-color
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 64
Notes
Support complet 64
Notes
Notes On macOS, you need to set the General > Show scroll bars setting in System Preferences to "Always" for this property to have any effect.
Support complet 63
Désactivée
Désactivée From version 63: this feature is behind the layout.css.scrollbar-color.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 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-color.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.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
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é.

Voir aussi