Personnaliser la Scrollbar CSS : Styles Modernes pour vos Barres de Défilement

Pourquoi personnaliser les scrollbars en CSS ?

Les barres de défilement par défaut des navigateurs peuvent détonner avec le design soigné de votre site web. La personnalisation des scrollbars en CSS permet d'harmoniser chaque détail de votre interface pour une expérience visuelle cohérente.

En 2026, deux approches coexistent : les pseudo-éléments Webkit (Chrome, Edge, Safari) et les propriétés standards scrollbar-color et scrollbar-width (Firefox et bientôt tous les navigateurs). Voici comment les maîtriser.

Méthode 1 : Pseudo-éléments Webkit (Chrome, Edge, Safari)

Les pseudo-éléments disponibles

Scrollbar minimaliste et élégante

/* Scrollbar fine et moderne */
::-webkit-scrollbar {
    width: 8px;      /* Largeur scrollbar verticale */
    height: 8px;     /* Hauteur scrollbar horizontale */
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
    transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Masquer les boutons flèches */
::-webkit-scrollbar-button {
    display: none;
}

Scrollbar transparente (apparaît au survol)

.scroll-container {
    overflow-y: auto;
    scrollbar-gutter: stable; /* Réserve l'espace */
}

.scroll-container::-webkit-scrollbar {
    width: 6px;
}

.scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

.scroll-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0);
    border-radius: 3px;
    transition: background 0.3s;
}

.scroll-container:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
}

.scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

Scrollbar avec dégradé

::-webkit-scrollbar { width: 10px; }

::-webkit-scrollbar-track {
    background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #3498db, #2c3e50);
    border-radius: 5px;
    border: 2px solid #f0f0f0; /* Crée un effet de marge */
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #2980b9, #1a252f);
}

Méthode 2 : Propriétés CSS standard (Firefox et navigateurs modernes)

/* scrollbar-width : contrôle la largeur */
.element {
    scrollbar-width: auto;  /* Largeur par défaut */
    scrollbar-width: thin;  /* Scrollbar fine */
    scrollbar-width: none;  /* Cache la scrollbar */
}

/* scrollbar-color : couleur thumb + track */
.element {
    scrollbar-color: #888 #f1f1f1;
    /* Premier = thumb (poignée), Second = track (piste) */
}

/* Combinaison recommandée */
.modern-scroll {
    scrollbar-width: thin;
    scrollbar-color: #888 transparent;
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
    .modern-scroll {
        scrollbar-color: #555 #1a1a2e;
    }
}

Solution cross-browser complète

/* Solution compatible tous navigateurs 2026 */
.custom-scrollbar {
    /* Firefox et standards */
    scrollbar-width: thin;
    scrollbar-color: #6b7280 #f3f4f6;

    /* Réserve l'espace pour éviter les sauts */
    scrollbar-gutter: stable;
}

/* Chrome, Edge, Safari */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* Application globale */
html {
    scrollbar-width: thin;
    scrollbar-color: #6b7280 #f3f4f6;
}
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-track { background: #f3f4f6; }
html::-webkit-scrollbar-thumb { background: #6b7280; border-radius: 4px; }
html::-webkit-scrollbar-thumb:hover { background: #4b5563; }

Exemples avancés de scrollbars personnalisées

Scrollbar dark mode automatique

:root {
    --scrollbar-thumb: #888;
    --scrollbar-track: #f1f1f1;
}

@media (prefers-color-scheme: dark) {
    :root {
        --scrollbar-thumb: #555;
        --scrollbar-track: #1e1e2e;
    }
}

html {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
html::-webkit-scrollbar-track { background: var(--scrollbar-track); }
html::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }

Scrollbar horizontale pour un carrousel

.carousel {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: #3498db transparent;
}
.carousel::-webkit-scrollbar { height: 6px; }
.carousel::-webkit-scrollbar-track { background: transparent; }
.carousel::-webkit-scrollbar-thumb {
    background: #3498db;
    border-radius: 3px;
}
.carousel-item {
    flex: 0 0 300px;
    scroll-snap-align: start;
}

Cacher la scrollbar tout en gardant le scroll

/* Méthode moderne */
.no-scrollbar {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
}
.no-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

/* Le scroll fonctionne toujours */
.no-scrollbar {
    overflow-y: auto;
    /* Le contenu reste scrollable avec la molette / tactile */
}

La propriété scrollbar-gutter

Nouvelle propriété CSS qui réserve l'espace de la scrollbar pour éviter les décalages de layout :

/* Réserve l'espace même quand la scrollbar n'est pas visible */
.container {
    scrollbar-gutter: stable;
}

/* Réserve l'espace des deux côtés (pour le centrage) */
.container {
    scrollbar-gutter: stable both-edges;
}

Bonnes pratiques pour les scrollbars personnalisées

• Restez subtil : une scrollbar trop voyante distrait l'utilisateur du contenu.
• Gardez un contraste suffisant : la poignée doit être visible sur la piste.
• Ne cachez pas la scrollbar sur les contenus importants : les utilisateurs ont besoin de savoir qu'il y a du contenu scrollable.
• Testez sur tous les navigateurs : les rendus peuvent varier entre Webkit et Firefox.
• Pensez au dark mode : adaptez vos couleurs de scrollbar aux deux thèmes.
• Utilisez scrollbar-gutter pour éviter les sauts de layout quand la scrollbar apparaît/disparaît.
• Largeur minimale de 6px : en dessous, la scrollbar devient difficile à attraper avec la souris.

Compatibilité navigateurs en 2026

Conclusion

La personnalisation des scrollbars CSS est un détail qui fait la différence entre un site amateur et un site professionnel. Combinez les pseudo-éléments Webkit et les propriétés standards pour une couverture maximale, et n'oubliez pas l'accessibilité et le dark mode.

Chez Tourak Digital, chaque détail compte dans nos créations web. Contactez-nous pour un site web soigné jusque dans les moindres détails.