scrollbar-width
Baseline
2024
Nouvellement disponible
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.
La propriété CSS scrollbar-width permet aux auteur·ice·s de définir l'épaisseur souhaitée des barres de défilement d'un élément lorsqu'elles sont affichées.
L'objectif de la propriété scrollbar-width est d'optimiser l'espace occupé par la barre de défilement sur une page ou un élément ; cet objectif n'est pas lié à l'esthétique de la barre de défilement. Les valeurs prédéfinies de scrollbar-width indiquent à l'agent utilisateur si une barre de défilement normale ou plus fine doit être rendue. Évitez d'utiliser none, car masquer une barre de défilement a un impact négatif sur l'accessibilité.
Note :
Pour les éléments qui ne sont défilables que par des moyens programmatiques et non par une interaction directe de l'utilisateur·ice, utilisez la propriété overflow avec une valeur de hidden plutôt que scrollbar-width: none.
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: revert;
scrollbar-width: revert-layer;
scrollbar-width: unset;
Valeurs
auto-
La largeur par défaut de la barre de défilement pour la plateforme.
thin-
Une variante plus fine de la barre de défilement sur les plateformes qui offrent cette option, ou une barre de défilement plus fine que la largeur par défaut de la plateforme.
none-
Aucune barre de défilement n'est affichée, mais l'élément reste défilable.
Note :
Les agents utilisateur doivent appliquer toute valeur de scrollbar-width définie sur l'élément racine à la zone d'affichage (viewport en anglais).
Accessibilité
Utilisez cette propriété avec prudence — définir scrollbar-width sur thin ou none peut rendre le contenu difficile ou impossible à faire défiler si l'auteur·ice ne fournit pas de mécanisme de défilement alternatif. Bien que les gestes de balayage ou les roues de souris puissent permettre de faire défiler ce contenu, certains appareils n'ont pas d'alternative de défilement.
Le critère WCAG 2.1.1 (Clavier) existe depuis longtemps pour conseiller sur l'accessibilité de base au clavier, et cela devrait inclure le défilement des zones de contenu. Introduit dans WCAG 2.1, le critère 2.5.5 (Taille de la cible) conseille que les cibles tactiles doivent avoir au moins 44px de largeur et de hauteur (bien que le problème soit amplifié sur les écrans haute résolution ; des tests approfondis sont recommandés).
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | boîtes défilantes |
| Héritée | non |
| Valeur calculée | comme défini |
| Type d'animation | discrète |
Syntaxe formelle
scrollbar-width =
auto |
thin |
none
Exemples
Redimensionner les barres de défilement
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 |
|---|
| CSS Scrollbars Styling Module Level 1 # scrollbar-width |
Compatibilité des navigateurs
Voir aussi
- Le module de débordement CSS
- Le module de mise en forme des barres de défilement CSS
- La propriété
overflow - La propriété
scrollbar-gutter - La propriété
scrollbar-color