La scrollbar-widthpropriété en CSS contrôle la largeur ou «l'épaisseur» d'une barre de défilement. scrollbar-widthfait partie du projet de niveau 1 du module Scrollbars du CSS Working Group, qui est toujours en cours de travail. Le consensus au moment de la rédaction de cet article est qu'il scrollbar-widthest susceptible d'être inclus dans les futures versions de CSS, mais il y a débat pour savoir si un argument variable sera autorisé, ou si les options seront limitées à des valeurs prédéfinies (plus d'informations sur celles-ci plus tard) .
Le réglage de la largeur de la barre de défilement est particulièrement important sur les pages ou les interfaces utilisateur avec un espace limité, où couper quelques pixels de la barre de défilement (ou la supprimer complètement) peut donner au contenu suffisamment d'espace pour respirer, sans supprimer la possibilité de faire défiler.
Pour un exemple, imaginez une interface d'édition de texte où les besoins doivent s'intégrer dans un conteneur court et étroit. Dans une telle situation, la barre de défilement peut occuper une grande partie de l'espace disponible:
scrollbar-width: auto;
Avec scrollbar-width, nous pouvons définir la largeur sur thinpour économiser de l'espace:
.scrollable-element ( scrollbar-width: thin; )
textarea avec scrollbar-width: thin;
Ou, nous pouvons définir la largeur sur nonepour la supprimer complètement, économisant encore plus d'espace (en supposant que nous sommes d'accord avec la disparition de la barre de défilement):
.scrollable-element ( scrollbar-width: none; )
textareaavec scrollbar-width: none;- et vous pouvez toujours faire défiler!
Syntaxe
scrollbar-width: auto | thin | none | ; Valeurs
scrollbar-width accepte les valeurs suivantes:
autoest la valeur par défaut et rendra les barres de défilement standard pour l'agent utilisateur.thinindiquera à l'agent utilisateur d'utiliser des barres de défilement plus fines, le cas échéant.nonemasquera complètement la barre de défilement, sans affecter la capacité de défilement de l'élément.est en cours de débat, mais (si ajouté) serait une largeur maximale de la barre de défilement.
Exemple
Prise en charge du navigateur
Ceci est pour la personnalisation globale des barres de défilement. Pour votre meilleur pari styliser un navigateur croisé à barre de défilement, cliquez ici.
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 91 * | 87 | 11 | 88 * | TP * |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 * | Non | 81 * | 14,0-14,4 * |
En rapport
scrollbar-gutterscrollbar-colorscrollbar
Ressources
- Brouillon du module Scrollbars CSSWG
- Collection W3C de cas d'utilisation pour la modification de la barre de défilement
- L'avenir du CSS: barres de défilement sur dev.to
- Discussion w3c Github sur le contrôle de la largeur de la barre de défilement