search

Found

info Aperçu

Ajustez largeur 2–30, rayon 0–20 et trois couleurs pour générer du CSS ::-webkit-scrollbar et scrollbar-color en direct.

📘 Mode d'emploi

  1. Ajuster la largeur et le rayon de courbure via les curseurs
  2. Sélectionner les couleurs du curseur, du survol et du fond
  3. Vérifier l'apparence générée dans la zone d'aperçu en temps réel

Générateur CSS de barre de défilement (Webkit + Firefox)

#Paramètres

12px
6px

#Aperçu & Code

La barre de défilement de cette zone change en temps réel. Faites défiler pour vérifier le résultat.

Les barres de défilement sont un élément important qui affecte considérablement l'utilisabilité des sites web et des applications. En les personnalisant avec du CSS, vous pouvez obtenir un design cohérent sur tous les navigateurs.

Les navigateurs basés sur Webkit (Chrome, Safari, Edge) permettent un contrôle précis grâce aux pseudo-éléments. Vous pouvez ajuster librement la couleur du curseur, l'arrière-plan de la piste, le rayon de la bordure et bien plus encore.

Firefox utilise les propriétés scrollbar-width et scrollbar-color pour une personnalisation simple. Bien que cela n'offre pas autant de contrôle que Webkit, cela couvre les principaux besoins de style.

Pour les sites avec un thème sombre, adapter la barre de défilement au thème crée une expérience visuelle plus cohérente et évite qu'une barre claire ne détonne avec le design.

Ajustez les curseurs et les sélecteurs de couleurs dans le panneau de gauche et regardez la barre de défilement changer en temps réel. Une fois que le résultat vous convient, copiez le code CSS généré.

Sur les navigateurs mobiles, les barres de défilement superposées sont courantes, ce qui peut masquer les styles personnalisés. Nous recommandons de vérifier sur les navigateurs de bureau.

Copié ! 

    

  




            


            
            

            

            
            

                

                    grid_view Similaires
                

                
            


        


        
        
    


    
    
    

        
        

            

            Article
            

        


        
        

            
Générateur de Scrollbar CSS Personnalisée｜Créez des barres de défilement sur mesure


Ce générateur vous permet de concevoir visuellement une barre de défilement (scrollbar) CSS personnalisée compatible avec les navigateurs modernes. Idéal pour les développeurs web et les intégrateurs web, il génère automatiquement le code optimisé pour Webkit et Firefox.


💡 À propos de cet outil


    

  • Génération multi-navigateurs
  L'outil crée simultanément le code CSS utilisant les pseudo-éléments ::-webkit-scrollbar (pour Chrome, Safari, Edge) et les propriétés standards scrollbar-width et scrollbar-color (pour Firefox), assurant une couverture maximale.
    • 

  • Prévisualisation en direct
  Ajustez la largeur (Width), l'arrondi (Border Radius) et les différentes couleurs (Thumb, Hover, Track). Le rendu s'applique instantanément dans la zone d'aperçu pour valider l'UI avant intégration.
    • 

  • Support des valeurs Hexadécimales
  Vous pouvez utiliser le sélecteur de couleurs natif ou saisir directement vos codes HEX (ex: #EC1380) pour un respect strict de votre charte graphique.
    • 

  • Sécurité et traitement local
  Le code est généré dynamiquement côté client. Aucune donnée n'est envoyée à un serveur ; tout le traitement s'effectue exclusivement dans votre navigateur.
    • 



🧐 Foire aux questions


Q. Pourquoi le code généré inclut-il à la fois des propriétés -webkit- et des standards W3C ?


A. Historiquement, seuls les moteurs Webkit (Chrome, Safari, Edge) permettaient une personnalisation fine via les pseudo-éléments (comme ::-webkit-scrollbar-thumb). Firefox, respectant strictement les recommandations du W3C, utilise les propriétés scrollbar-width et scrollbar-color. Pour garantir un affichage personnalisé sur l'ensemble du parc de navigateurs, il est impératif de combiner ces deux approches dans votre feuille de style.


Q. Comment appliquer ce style à l'ensemble de ma page web ?


A. L'outil génère le code en ciblant une classe générique .custom-scroll. Pour l'appliquer à la barre de défilement globale du site, remplacez simplement .custom-scroll par le sélecteur body ou html dans le code CSS récupéré. Pour les conteneurs spécifiques, appliquez la classe .custom-scroll sur tout élément possédant la propriété overflow: auto ou overflow: scroll.


Q. Quelle est la largeur idéale pour une barre de défilement ?


A. La largeur standard d'une barre de défilement native se situe généralement entre 12px et 16px sur les environnements de bureau (Windows, macOS). Pour un design moderne et minimaliste, une largeur de 8px à 10px est souvent privilégiée. Attention toutefois à l'accessibilité : une largeur inférieure à 8px peut rendre la manipulation difficile pour les utilisateurs naviguant à la souris.


📚 Le saviez-vous ? L'évolution du Scrollbar Styling


Pendant de nombreuses années, modifier l'apparence d'une barre de défilement était considéré comme une mauvaise pratique, forçant souvent les développeurs à utiliser des bibliothèques JavaScript lourdes (comme Perfect Scrollbar) pour surcharger le comportement natif du navigateur. Ces solutions posaient des problèmes de performances et d'accessibilité. 


Aujourd'hui, avec l'adoption de la spécification CSS Scrollbars Module Level 1, la personnalisation native est devenue la norme. Cependant, une différence subsiste : la spécification W3C limite volontairement les options (uniquement la couleur et la largeur fine/auto) pour préserver l'ergonomie du système d'exploitation, tandis que l'implémentation Webkit permet toujours d'arrondir les bords (border-radius) ou d'ajouter des effets de survol (:hover). Ce générateur exploite le meilleur des deux mondes pour offrir une interface utilisateur cohérente et élégante sans compromettre les performances.