Générateur de Scrollbar CSS

Le Générateur de Scrollbar CSS est un outil en ligne gratuit qui vous permet de personnaliser le design des barres de défilement de votre site Web et de créer instantanément le code CSS nécessaire.
Il suffit d'utiliser les curseurs et les sélecteurs de couleurs pour ajuster les styles de la poignée et de la piste, tels que les couleurs, la largeur et le rayon de bordure, tout en affichant des aperçus en temps réel.
Le code généré est compatible non seulement avec les navigateurs WebKit comme Chrome, Safari et Edge, mais prend également en charge Firefox via scrollbar-color et scrollbar-width. Tous les traitements sont effectués dans votre navigateur, ce qui rend son utilisation sûre, rapide et gratuite, sans aucune installation ni inscription.

Préfixe WebKit (::-webkit-scrollbar)

Un pseudo-élément CSS non standard utilisé pour personnaliser les barres de défilement dans les navigateurs propulsés par les moteurs WebKit/Blink, tels que Chrome, Safari et Edge. Il permet des designs hautement personnalisables.

Piste de la barre de défilement (Track)

L'arrière-plan ou la rainure de la barre de défilement. Vous pouvez la styliser en utilisant ::-webkit-scrollbar-track pour définir sa couleur de fond ou ses ombres internes.

Poignée de la barre de défilement (Thumb)

La partie glissante de la barre de défilement qui indique la position de défilement. Elle est stylisée en utilisant ::-webkit-scrollbar-thumb pour ajuster sa couleur et son rayon de bordure.

scrollbar-color et scrollbar-width

Propriétés CSS standards du W3C prises en charge par des navigateurs comme Firefox qui ne prennent pas en charge les préfixes WebKit. Elles vous permettent de définir les couleurs de la poignée et de la piste et de définir la largeur (auto, thin ou none).

Compatibilité multi-navigateurs

La capacité d'un site Web à fonctionner et à s'afficher de manière cohérente sur différents navigateurs Web (Chrome, Firefox, Safari, etc.). Notre outil génère du code qui fonctionne parfaitement sur tous les principaux navigateurs.

Q.Le CSS généré fonctionnera-t-il sur smartphones ?

Oui, il fonctionne sur les navigateurs mobiles basés sur WebKit comme Safari sur iOS et Chrome sur Android. Cependant, selon les spécifications de l'OS, la barre de défilement peut n'apparaître que pendant le défilement.

Q.Puis-je appliquer la barre de défilement uniquement à un élément spécifique (comme une div) ?

Oui. Remplacez simplement .custom-scrollbar dans le code généré par la classe ou l'ID de votre élément spécifique (ex. .my-container ou #scroll-box).

Q.Est-ce compatible avec le navigateur Firefox ?

Oui. Cet outil génère automatiquement non seulement des pseudo-éléments WebKit, mais aussi les propriétés standards W3C scrollbar-color et scrollbar-width pour Firefox.

Q.Mes données sont-elles sauvegardées sur un serveur lors de l'utilisation de cet outil ?

Non. Cet outil s'exécute entièrement dans votre navigateur en utilisant JavaScript, donc vos paramètres et le code généré ne sont jamais envoyés à des serveurs externes.

Q.Comment puis-je cacher complètement la barre de défilement ?

Pour masquer la barre de défilement tout en conservant la fonctionnalité de défilement, vous pouvez utiliser ::-webkit-scrollbar { display: none; } pour WebKit et scrollbar-width: none; pour Firefox.