6XC

Générateur de Scrollbar CSS

Concevez une barre de défilement colorée personnalisée avec aperçu en direct et copiez le CSS — compatible WebKit et Firefox.

736 vues

Cette zone sert à tester votre barre de défilement personnalisée. Défilez vers le bas et observez la barre à droite suivre votre design. Modifiez les couleurs et les tailles ; le résultat s'applique instantanément à cette zone.

Cette zone sert à tester votre barre de défilement personnalisée. Défilez vers le bas et observez la barre à droite suivre votre design. Modifiez les couleurs et les tailles ; le résultat s'applique instantanément à cette zone.

Cette zone sert à tester votre barre de défilement personnalisée. Défilez vers le bas et observez la barre à droite suivre votre design. Modifiez les couleurs et les tailles ; le résultat s'applique instantanément à cette zone.

Cette zone sert à tester votre barre de défilement personnalisée. Défilez vers le bas et observez la barre à droite suivre votre design. Modifiez les couleurs et les tailles ; le résultat s'applique instantanément à cette zone.

Cette zone sert à tester votre barre de défilement personnalisée. Défilez vers le bas et observez la barre à droite suivre votre design. Modifiez les couleurs et les tailles ; le résultat s'applique instantanément à cette zone.

Cette zone sert à tester votre barre de défilement personnalisée. Défilez vers le bas et observez la barre à droite suivre votre design. Modifiez les couleurs et les tailles ; le résultat s'applique instantanément à cette zone.

Comment Styliser les Barres de Défilement avec CSS ?

Deux mécanismes existent : les navigateurs WebKit (Chrome, Edge, Safari) utilisent la famille de pseudo-éléments ::-webkit-scrollbar, permettant de styliser le rail, le curseur, la largeur et le rayon ; Firefox utilise les propriétés standard plus simples scrollbar-color et scrollbar-width. Le code généré inclut les deux, afin que votre barre de défilement soit cohérente partout.

Ajustez les couleurs, la largeur et le rayon ; le panneau d'aperçu à droite défile avec votre design appliqué, et le CSS se met à jour instantanément.

Questions fréquentes

Pourquoi ma barre de défilement est-elle différente dans Firefox ?

Firefox ignore les règles ::-webkit-scrollbar et ne respecte que scrollbar-color (couleurs du curseur et du rail) et scrollbar-width. Le rayon et les effets au survol sont exclusifs à WebKit ; Firefox affiche une version simplifiée.

Puis-je styliser la barre de défilement d'un seul élément ?

Oui — délimitez les sélecteurs : .ma-boite::-webkit-scrollbar { … } et .ma-boite { scrollbar-color: … }. Appliquez-le à html ou body (ou utilisez les sélecteurs nus de ce générateur) pour toute la page.

Les barres de défilement personnalisées fonctionnent-elles sur mobile ?

Majoritairement non : iOS et la plupart des navigateurs Android utilisent des barres de défilement superposées qui ignorent ces styles. Considérez les barres de défilement personnalisées comme une amélioration pour ordinateur de bureau.

Outils similaires

Générateur de dégradé CSS Concevez des dégradés CSS linéaires, radiaux et coniques avec aperçu en direct et copiez le code. Lancer Générateur d'ombre CSS (box-shadow) Concevez une box-shadow visuellement — décalages, flou, étalement, couleur, opacité et inset — avec aperçu en direct. Lancer Générateur de border-radius CSS Arrondissez chaque coin individuellement ou tous à la fois, en px ou %, avec aperçu en direct et CSS copiable. Lancer Générateur d'ombre de texte CSS Concevez un text-shadow avec décalages, flou, couleur et opacité — aperçu en direct sur un texte d'exemple. Lancer