Aller au contenu
TextArray1.87.0
Tout en local

Générateur de styles de barre de défilement CSS

Générez les propriétés CSS ::-webkit-scrollbar et scrollbar-width/scrollbar-color personnalisées.

Sortie
Outils connexes
Générateur de box-shadow CSSOutils de développement
Extracteur de variables de couleur CSSOutils de développement
Générateur de transitions et d'easing CSSnouveauOutils de développement
différence de clé i18nOutils de développement
Convertisseur TOML en JSONOutils de développement
SQL vers JSONOutils de développement
Générateur de styles de barre de défilement CSS
La barre de défilement par défaut du navigateur ne correspond rarement au reste de la conception, et la styliser signifie retenir deux spécifications différentes à la fois : les pseudo-éléments ::-webkit-scrollbar de WebKit que Chrome, Safari et Edge utilisent, et les propriétés scrollbar-width/scrollbar-color standard que Firefox lit. Cet outil génère les deux à la fois à partir de quelques options, vous copier un bloc CSS et chaque navigateur majeur rend une barre de défilement correspondante.
Définissez un sélecteur cible —body pour la page entière, ou une classe comme .sidebar pour un panneau défilable— puis choisissez la largeur de la barre de défilement en pixels, les couleurs de la piste et du curseur, et la couleur que le curseur passe au survol. L'arrondi du curseur contrôle le border-radius de la barre déplaçable, et la bordure intérieure ajoute un espace transparent entre le curseur et la piste pour qu'il se lit comme une pilule flottante au lieu d'un bloc solide. L'option Variante bascule entre la barre de défilement normale du navigateur, une plus mince "fin", et "masqué", qui supprime complètement la barre avec -ms-overflow-style et scrollbar-width: none tout en laissant le défilement propre de l'élément intact.
L'activation de la variante mode sombre enveloppe une deuxième copie des règles dans un bloc @media (prefers-color-scheme: dark), avec les couleurs de la piste et du curseur automatiquement assombries pour qu'un site qui bascule déjà les thèmes obtienne une barre de défilement qui bascule avec lui —sans calcul séparé nécessaire. Chaque option met à jour la sortie en direct au fur et à mesure que vous l'ajustez, et le total sous le résultat indique combien de blocs de règles CSS ont été générés et le nombre exact de caractères.
Tout s'exécute localement dans votre navigateur : aucun sélecteur, couleur ou CSS n'est jamais envoyé à un serveur. Copiez le résultat directement dans votre feuille de style, téléchargez-le en tant que fichier .txt, ou envoyez-le à l'entrée d'un autre outil pour continuer à l'affiner.
FAQ
Pourquoi l'outil génère-t-il à la fois les propriétés scrollbar-width et ::-webkit-scrollbar?
Aucune propriété CSS unique n'est prise en charge partout. Firefox lit les propriétés scrollbar-width et scrollbar-color standard, tandis que Chrome, Safari et Edge ne répondent qu'aux pseudo-éléments ::-webkit-scrollbar plus anciens. Générer les deux signifie que la même feuille de style fonctionne sur tous les navigateurs.
La variante "Masqué" arrête-t-elle le défilement de l'élément?
Non. Il masque uniquement la piste et le curseur de la barre de défilement visuelle en utilisant scrollbar-width: none et -ms-overflow-style: none. L'élément défile toujours normalement avec une molette de souris, un trackpad ou un tactile —le contenu n'a simplement pas de barre de défilement visible.
Que fait réellement la bordure intérieure du curseur?
Il ajoute une bordure transparente autour du curseur avec background-clip: padding-box, qui rétrécit le remplissage visible vers l'intérieur à partir des bords de la piste. Cet espace est ce qui rend un curseur ressemblant à une pilule arrondie plutôt qu'à une barre qui touche les deux côtés de la barre de défilement.
Comment les couleurs du mode sombre sont-elles calculées?
Chaque couleur que vous définissez est mélangée vers le noir par une quantité fixe et placée dans un bloc @media (prefers-color-scheme: dark), de sorte qu'un site utilisant le mode sombre automatique obtient une piste et un curseur proportionnellement plus sombres sans que vous choisissiez un deuxième ensemble de couleurs à la main.
Mon CSS ou les couleurs que je choisis sont-ils envoyés quelque part?
Non. Le CSS de la barre de défilement est généré entièrement dans votre navigateur —rien de ce que vous tapez ou sélectionnez ne quitte jamais votre appareil.