Brouillon
Cette page n'est pas terminée.

Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

Le pseudo-élément ::-webkit-scrollbar permet de modifier le style de la barre de défilement associée à un élément. Il s'agit d'un pseudo-élément propriétaire, uniquement disponible pour les navigateurs WebKit.

Syntaxe

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

Sélecteurs de scrollbars

You can use the following pseudo elements to customize various parts of the scrollbar for webkit browsers:

  • ::-webkit-scrollbar — la barre entière.
  • ::-webkit-scrollbar-button — les boutons de la barre de défilement (les flèches vers le bas ou le haut)
  • ::-webkit-scrollbar-thumb — l'emplacement qui permet de déplacer la barre de défilement.
  • ::-webkit-scrollbar-track — la piste (la zone de progression) de la barre de défilement
  • ::-webkit-scrollbar-track-piece — la partie de la piste qui n'est pas couverte par le bouton de la barre de défilement.
  • ::-webkit-scrollbar-corner — le coin inférieur de la barre où les barres horizontales et verticales se rencontrent.
  • ::-webkit-resizer — le bouton qui apparaît dans le coin inférieur de certains éléments et qui permet de les redimensionner.

Exemples

.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;
  height: 2em;
}
.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Demonstrate a "mostly customized" scrollbar
 * (won't be visible otherwise if width/height is specified) */
.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /* or add it to the track */
}
/* Add a thumb */
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #000; 
}
<div class="visible-scrollbar">
  Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
  Proin at nulla elementum, consectetur ex eget, commodo ante. 
  Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
  blandit quam turpis, at mollis velit pretium ut. Nunc consequat
  efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
  sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
  tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
  consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
  amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
  mattis cursus dolor. Pellentesque id pretium est. Quisque
  convallis nisi a diam malesuada mollis. Aliquam at enim ligula.
</div>
<div class="invisible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
<div class="mostly-customized-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br>
And pretty tall<br>
thing with weird scrollbars.<br>
Who thought scrollbars could be made weeeeird?</div>

Spécifications

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

Compatibilité des navigateurs

::-webkit-scrollbar

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simple
Non-standard
Chrome Support complet OuiEdge Aucun support Non
Notes
Aucun support Non
Notes
Notes Under consideration
Firefox Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1432935.
IE Aucun support NonOpera Support complet 15Safari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Aucun support NonFirefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1432935.
Opera Android Support complet 14Safari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Voir les notes d'implémentation.
Voir les notes d'implémentation.

::-webkit-scrollbar-button

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simple
Non-standard
Chrome Support complet OuiEdge Aucun support Non
Notes
Aucun support Non
Notes
Notes Under consideration
Firefox Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1432935.
IE Aucun support NonOpera Support complet 15Safari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Aucun support NonFirefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1432935.
Opera Android Support complet 14Safari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Voir les notes d'implémentation.
Voir les notes d'implémentation.

::-webkit-scrollbar-thumb

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simple
Non-standard
Chrome Support complet OuiEdge Aucun support Non
Notes
Aucun support Non
Notes
Notes Under consideration
Firefox Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1432935.
IE Aucun support NonOpera Support complet 15Safari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Aucun support NonFirefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1432935.
Opera Android Support complet 14Safari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Voir les notes d'implémentation.
Voir les notes d'implémentation.

::-webkit-scrollbar-track

No compatibility data found. Please contribute data for "css.selectors.-webkit-scrollbar-track" (depth: 1) to the MDN compatibility data repository.

::-webkit-scrollbar-track-piece

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simple
Non-standard
Chrome Support complet OuiEdge Aucun support Non
Notes
Aucun support Non
Notes
Notes Under consideration
Firefox Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1432935.
IE Aucun support NonOpera Support complet 15Safari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Aucun support NonFirefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1432935.
Opera Android Support complet 14Safari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Voir les notes d'implémentation.
Voir les notes d'implémentation.

::-webkit-scrollbar-corner

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simple
Non-standard
Chrome Support complet OuiEdge Aucun support Non
Notes
Aucun support Non
Notes
Notes Under consideration
Firefox Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1432935.
IE Aucun support NonOpera Support complet 15Safari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Aucun support NonFirefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1432935.
Opera Android Support complet 14Safari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Voir les notes d'implémentation.
Voir les notes d'implémentation.

::-webkit-resizer

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simple
Non-standard
Chrome Support complet OuiEdge Aucun support Non
Notes
Aucun support Non
Notes
Notes Under consideration
Firefox Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1432935.
IE Aucun support NonOpera Support complet 15Safari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Aucun support NonFirefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1432935.
Opera Android Support complet 14Safari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

Étiquettes et contributeurs liés au document

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