Générateur de barres de défilement CSS

Réglez largeur, rayon, bordure et trois couleurs, vérifiez le rendu dans l’aperçu défilable puis copiez le CSS généré.

Fonctionne localement dans votre navigateur

Voir la catégorie: Frontend et design (34)

· ::-webkit-scrollbar · scrollbar-color · Firefox

PANNEAU DE CONTRÔLE

APERÇU

Notes du développeur déroulantes

Utilisez le pouce pour inspecter la largeur générée, la bordure et le traitement du survol.

Sortie multi-navigateur

L'export inclut les propriétés Firefox standardisées et les pseudo-éléments WebKit.

Production de copies CSS

Appliquez la classe générée à n’importe quel conteneur de débordement de votre interface.

Conserver le comportement natif

Le style change d’apparence tandis que le défilement du clavier et de la molette reste natif.

EXPORTER LE CSS

Comment styler une barre de défilement et copier le CSS généré

Le générateur écrit deux jeux de règles à partir des mêmes six valeurs : les propriétés standard scrollbar-width et scrollbar-color pour Firefox, et la famille ::-webkit-scrollbar — piste, curseur, survol et largeur/hauteur — pour Chromium et Safari. L’indicateur de l’en-tête de scène affiche la largeur courante et le mot-clé correspondant, par exemple « 12px · auto ».

L’aperçu est un vrai conteneur à débordement, pas un dessin : lors du test, 528 px de contenu tenaient dans une fenêtre de 300 px, la barre est donc peinte par le navigateur lui-même. Le CSS affiché dans le panneau de code est injecté avec #cs-scroll-preview comme sélecteur ; seule la classe change par rapport à ce que vous copiez.

Choisissez un préréglage pour charger un jeu complet de valeurs. Forest est celui par défaut — largeur 12, rayon 10, bordure 3, curseur #2e8b62, survol #1f6f4b, piste #e7f0eb —, puis viennent Slate (11/3/2), Sunset (14/12/3) et Minimal (7/7/0).

Vous pouvez aussi régler les valeurs à la main : Largeur (4–28 px), Rayon des coins (0–30 px), Bordure du curseur (0–6 px) et les couleurs du curseur, du survol et de la piste. Dès qu’un champ est modifié, le sélecteur passe sur l’entrée Personnalisé ; Réinitialiser restaure les valeurs de Forest.

Les nombres sont validés en quittant le champ ou avec Entrée : arrondis au pixel entier, ramenés dans leur plage et réécrits dans le champ. 100 devient 28, 3 devient 4, un champ vidé revient à 4 et 12.6 devient 13 : le nombre affiché, l’indicateur et le CSS exporté ne peuvent plus diverger.

Surveillez l’aperçu pendant les réglages : il défile réellement, donc le curseur, sa bordure, la piste et la couleur de survol sont peints par le navigateur. Une largeur de 10 px ou moins fait aussi passer la déclaration standard à scrollbar-width: thin ; à partir de 11 px, c’est auto, car Firefox n’accepte que ces deux mots-clés et la largeur exacte en pixels est une fonctionnalité WebKit.

« Copier le CSS » place le texte du panneau de code dans le presse-papiers — cinq règles, rien d’autre — et Réinitialiser revient aux valeurs de Forest. Le sélecteur produit est .custom-scrollbar ; remplacez-le par la classe de votre propre conteneur à débordement.

Largeur, couleurs, préréglages et les deux jeux de règles écrits par le générateur

Ce que contient le CSS copié

Le bloc réunit cinq règles : la classe de base avec scrollbar-color: <curseur> <piste>, ::-webkit-scrollbar avec la largeur et la hauteur, ::-webkit-scrollbar-track avec la couleur de piste et le rayon, ::-webkit-scrollbar-thumb avec la couleur du curseur, une bordure peinte dans la couleur de piste et le même rayon, puis ::-webkit-scrollbar-thumb:hover avec la couleur de survol.

Les couleurs sont écrites en hexadécimal à six chiffres, en minuscules, et les nombres en pixels entiers. La bordure du curseur reprend volontairement la couleur de piste : elle rentre le curseur pour laisser apparaître la piste comme un filet tout autour, et changer la couleur de piste change donc aussi la bordure.

Préréglages, valeurs par défaut et réinitialisation

Les quatre préréglages sont des jeux de valeurs fixes, pas des feuilles de style : Forest 12/10/3 avec #2e8b62, #1f6f4b et #e7f0eb, Slate 11/3/2 avec #526575, #354754 et #dfe5e8, Sunset 14/12/3 avec #d87352, #a94f3a et #f7e4dc, et Minimal 7/7/0 avec #87958e, #53635b et #f3f6f4. L’ordre est largeur, rayon, bordure, puis curseur, survol et piste.

Personnalisé est un état, pas un cinquième préréglage : l’entrée reste masquée dans la liste, s’affiche comme libellé sélectionné dès qu’un champ est modifié, et la choisir n’écrase pas les valeurs à l’écran. Réinitialiser restaure les valeurs de Forest et vide la ligne d’état.

Limites, prise en charge des navigateurs et traitement local

La largeur est limitée à 4–28 px, le rayon à 0–30 px et la bordure du curseur à 0–6 px ; chaque valeur est arrondie au pixel entier au moment de la validation. Chromium et Safari respectent la largeur en pixels et les couleurs via les pseudo-éléments ::-webkit-scrollbar, tandis que Firefox ne traite que scrollbar-width et scrollbar-color : vérifiez le rendu dans les deux moteurs avant de livrer — l’aperçu montre le navigateur que vous utilisez.

Tout se passe dans la page : après le chargement, les changements de préréglage, la saisie d’une largeur, le choix d’une couleur, la copie et la réinitialisation, aucune requête réseau n’a été émise lors des passes en, fr et ja, et la page n’a signalé aucune erreur de console. La mise en page reste dans la fenêtre de 320 px à 1360 px de large, sans défilement horizontal.