Générateur de Scrollbar CSS
Personnalisez vos barres de défilement CSS. Ajustez la largeur, la couleur de la piste, la couleur du curseur, le rayon de bordure et les effets au survol. Aperçu en direct et CSS prêt à copier.
Scrollbar
Width10px
Thumb Border Radius5px
Track Border Radius0px
Thumb Border0px
Colors
Track Color
#f1f1f1
Thumb Color
#888888
Thumb Hover
#555555
Thumb Border Color
#ffffff
Preview
CSS Code
/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888888;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #555555;
}
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #888888 #f1f1f1;
}Comment utiliser Générateur de Scrollbar CSS
- 1Ajustez la largeur de la barre, la couleur de la piste et la couleur du curseur.
- 2Personnalisez le rayon de bordure et les effets au survol.
- 3Prévisualisez la barre de défilement sur du contenu exemple.
- 4Copiez le code CSS pour votre projet.
ZenovayAnalytics
Sachez ce que vos visiteurs font vraiment.
- Suivi des visiteurs en temps réel
- Vie privée d'abord, sans bandeau cookies
- Installé en deux minutes
Outils connexes
Générateur de gradient CSS
Créez de beaux gradients CSS avec un éditeur visuel. Gradients linéaires, radiaux et coniques.Générateur d'Ombre de Boîte CSS
Concevez des ombres de boîte CSS avec des contrôles visuels. Ajustez le décalage, le flou, l'étalement et la couleur.Générateur de Rayon de Bordure CSS
Créez des valeurs de rayon de bordure personnalisées avec des contrôles visuels. Liez ou dissociez les coins pour un ajustement rapide.Zone de jeu CSS Flexbox
Apprenez et générez des mises en page CSS Flexbox visuellement. Ajustez la direction, l'alignement, l'enveloppe et l'écart en temps réel.Questions fréquemment posées
Comment styliser les barres de défilement avec CSS ?▾
Utilisez les pseudo-éléments ::-webkit-scrollbar pour Chrome/Safari/Edge, et les propriétés scrollbar-width/scrollbar-color pour Firefox. Ce générateur exporte les deux syntaxes.
Quels navigateurs supportent les barres de défilement personnalisées ?▾
Chrome, Edge et Safari supportent ::-webkit-scrollbar (85 % des utilisateurs). Firefox 64+ supporte scrollbar-width et scrollbar-color. Couverture combinée ~ 97 %.
Puis-je rendre les barres de défilement transparentes ?▾
Oui. Définissez la largeur de la barre à 0 et l'arrière-plan transparent pour WebKit, ou scrollbar-width: none pour Firefox. Le contenu reste défilable.
Le CSS de barre de défilement personnalisée affecte-t-il les performances ?▾
Impact négligeable. Le style de la barre de défilement est appliqué une fois par élément, pas à chaque frame. Même les styles complexes n'ont aucun effet de performance mesurable.
Dois-je utiliser une bibliothèque JavaScript pour les barres de défilement ?▾
Les barres de défilement en CSS seul sont préférées. Les bibliothèques JS ajoutent du poids et peuvent causer des problèmes d'accessibilité. Utilisez JS uniquement quand le CSS ne peut pas réaliser votre design.