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

Propriétés standard modernes (2023 et après)

/* Applies to the element that scrolls */
html {
  scrollbar-width: thin;           /* auto | thin | none */
  scrollbar-color: #4f46e5 #e5e7eb; /* thumb track */
}

Compatibilité des navigateurs (2024) :

• scrollbar-width : Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-color : Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-gutter: stable : Chrome 94+, Safari 14+, Firefox 97+. Réserve l’espace de la barre de défilement même lorsqu’elle n’est pas nécessaire, ce qui évite les sauts de mise en page.

Pseudo-éléments webkit (Chrome, Safari, ancien Edge)

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3730a3;
}

Un contrôle plus fin. width définit la largeur de la barre de défilement verticale ; height définit la hauteur de la barre horizontale. Ajoutez les deux pour les conteneurs qui peuvent défiler dans les deux sens.

Combinez les deux approches en cascade

Indiquez d’abord les règles modernes, puis webkit comme amélioration pour les navigateurs qui interprètent les deux :

.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: #4f46e5 #e5e7eb;
}
.scroll-area::-webkit-scrollbar       { width: 8px; }
.scroll-area::-webkit-scrollbar-track { background: #e5e7eb; }
.scroll-area::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 4px;
  border: 2px solid #e5e7eb;
}

Firefox ne respecte que les règles modernes scrollbar-*. Chrome et Safari respectent les règles webkit (qui remplacent les modernes, pour un comportement cohérent).

scrollbar-gutter empêche le décalage du contenu

Sans gouttière réservée, le contenu se recompose lorsqu’une barre de défilement apparaît (fréquent dans les listes dynamiques). Solution :

html { scrollbar-gutter: stable; }
/* or */
html { scrollbar-gutter: stable both-edges; }

L’emplacement de la barre de défilement est réservé, que le contenu défile ou non. both-edges ajoute une gouttière équivalente du côté opposé pour garder le contenu visuellement centré.

Masquer entièrement les barres de défilement

.no-scrollbar {
  scrollbar-width: none;           /* Firefox */
}
.no-scrollbar::-webkit-scrollbar { display: none; }  /* Chrome, Safari */

Attention : masquer la barre de défilement empêche les utilisateurs de voir que le contenu peut défiler. Ne le faites qu’avec un indicateur clair (flèches, points de page) ou lorsque le défilement est évident d’après le contexte (carrousels horizontaux, historiques de discussion).

Considérations mobiles

Sous iOS et Android, les barres de défilement n’apparaissent qu’un instant pendant le défilement. Votre CSS de barre personnalisée s’applique quand même, mais les utilisateurs ne la voient peut-être jamais plus d’une seconde. Concevez en conséquence : n’investissez pas trop dans des fioritures visuelles qui apparaissent rarement.

Accessibilité

• Contraste : le curseur par rapport au rail doit atteindre 3:1 pour le contraste non textuel (WCAG 1.4.11).
• Largeur : les barres de défilement fines peuvent être difficiles à attraper à la souris, surtout pour les utilisateurs ayant des difficultés motrices. La largeur normale est une valeur par défaut plus sûre.
• Ne retirez jamais la barre de défilement dans les zones défilantes sans fournir un autre moyen de défilement. Les utilisateurs qui dépendent de la barre se retrouveront bloqués.