Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
scrollbar-width
Baseline
2024
Newly available
Depuis December 2024, 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.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
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
scrollbar-width: none;
scrollbar-width: thin;
scrollbar-width: auto;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
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>
</section>
#example-element {
width: 300px;
height: 100px;
overflow-y: scroll;
}
Syntaxe
/* 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 :autoLa largeur par défaut, fournie par le système, pour la barre de défilement.thinUne 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.noneAucune barre de défilement n'est affichée mais on peut toujours faire défiler l'élément.Note : Toute valeur de
scrollbar-widthdoit ê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-widthest une fonctionnalité qui sera potentiellement abandonnée de la spécification (voir l'issue 1958).
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | boîtes défilantes |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
scrollbar-width =
auto |
thin |
none
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
| Specification |
|---|
| CSS Scrollbars Styling Module Level 1 # scrollbar-width |
Compatibilité des navigateurs
Chargement...