Styliseur de Barre de Défilement CSS
Contrôles
Aperçu & CSS
Scroll to preview the custom scrollbar style. This is some example content to make the box scrollable.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Note : les styles webkit scrollbar fonctionnent dans Chrome/Edge/Safari. Firefox utilise scrollbar-color + scrollbar-width.
Comment l'utiliser
- Définissez la largeur de la barre — Choisissez fine, auto ou une valeur en pixels personnalisée pour la piste.
- Choisissez la couleur du curseur — Sélectionnez la couleur de la poignée glissante de la barre.
- Choisissez la couleur de la piste — Définissez la couleur d'arrière-plan du rail de la barre.
- Copiez le CSS — Cliquez sur « Copier le CSS » pour obtenir les règles de style complètes de la barre.
Qu'est-ce que la stylisation de barre de défilement CSS ?
La stylisation CSS permet de personnaliser l'apparence des barres de défilement à l'aide des pseudo-éléments ::-webkit-scrollbar pour Chromium/Safari, et des propriétés standard scrollbar-color et scrollbar-width pour Firefox.
Les barres personnalisées améliorent la cohérence visuelle avec votre design system. Elles sont purement cosmétiques — la fonctionnalité et l'accessibilité de la barre restent inchangées.
Cas d'usage courants
Conseils & bonnes pratiques
Incluez à la fois les règles ::-webkit-scrollbar pour Chrome/Safari et scrollbar-color/scrollbar-width pour Firefox afin de couvrir tous les navigateurs majeurs.
Assurez un contraste suffisant entre les couleurs du curseur et de la piste. Un faible contraste rend la position de la barre difficile à voir.
Utilisez scrollbar-width: thin ou une largeur de 6 à 8px pour des interfaces modernes et minimalistes qui ne distraient pas du contenu.
Appliquez les styles de barre à une classe de conteneur spécifique plutôt qu'à body pour ne pas écraser globalement les valeurs par défaut du navigateur.
Questions fréquentes
Les barres personnalisées fonctionnent-elles dans tous les navigateurs ?
Les pseudo-éléments ::-webkit-scrollbar fonctionnent dans Chrome, Edge et Safari. Firefox utilise les propriétés standard scrollbar-color et scrollbar-width. Inclure les deux couvre la grande majorité des utilisateurs.
Puis-je masquer la barre tout en gardant le défilement ?
Oui. Définissez scrollbar-width: none (Firefox) et ::-webkit-scrollbar { display: none; } (Chrome/Safari) tout en conservant overflow: auto.
La stylisation de la barre affecte-t-elle l'accessibilité ?
La stylisation ne supprime pas la fonction de défilement. Cependant, un contraste très faible ou des barres invisibles peuvent dérouter les utilisateurs. Conservez toujours un curseur visible lorsque le contenu déborde.
Puis-je styliser uniquement la barre horizontale ?
Oui. Avec ::-webkit-scrollbar, vous pouvez utiliser les pseudo-classes :horizontal et :vertical pour styliser chaque axe indépendamment.