scrollbar-width

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-width permet à un auteur de définir l'épaisseur maximale à utiliser pour la barre de défilement si celle-ci est affichée.

Valeur initialeauto
Applicabilitéboîtes défilantes
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationune longueur
Ordre canoniqueselon la grammaire

Syntaxe

/* Valeurs avec un mot-clé */
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;

/* Valeur de longueur */
/* Type <length> */
scrollbar-width: 1em;

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

Valeurs

<scrollbar-width>
Une valeur qui définit l'épaisseur de la barre de défilement. Cette valeur est une longueur (cf. <length>) positive ou bien un mot-clé. Si c'est un mot-clé, ce dernier doit avoir l'une des valeurs suivantes :
auto La largeur par défaut, fournie par le système, pour la barre de défilement.
thin Une variante plus fine de la barre de défilement plus fine dans le cas des plateformes qui fournissent une telle option ou une barre de défilement avec une largeur moindre que la largeur par défaut du système.
none Aucune barre de défilement n'est affichée mais on peut toujours faire défiler l'élément.

Note : Toute valeur de scrollbar-width doit être appliquée sur l'élément racine de la zone d'affichage (viewport) par les agents utilisateur.

Syntaxe formelle

auto | thin | none | <length>

Exemples

CSS

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  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

Spécifications

Spécification État Commentaires
CSS Scrollbars Level 1
La définition de 'scrollbar-width' 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-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 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-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é.

Étiquettes et contributeurs liés au document

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