scrollbar-width

Baseline 2024

Newly available

Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Expérimental: 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.

Exemple interactif

Syntaxe

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

/* 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.

Note : L'utilisation des longueurs pour scrollbar-width est une fonctionnalité qui sera potentiellement abandonnée de la spécification (voir l'issue 1958).

Définition formelle

Valeur initialeauto
Applicabilitéboîtes défilantes
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète

Syntaxe formelle

scrollbar-width = 
  auto  |
  thin  |
  none

Exemples

CSS

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

HTML

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

Specification
CSS Scrollbars Styling Module Level 1
# scrollbar-width

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi