CSS : Personnaliser les scrollbars de façon moderne

Les barres de défilement (scrollbars) sont rarement personnalisées, alors qu’elles font pourtant partie intégrante de l’interface utilisateur. Selon les navigateurs, leur apparence peut varier fortement, parfois trop visibles, parfois invisibles, souvent peu cohérentes avec le design général d’un site.

Heureusement, il est aujourd’hui possible de les styliser avec du CSS natif et compatible sur tous les navigateurs récents, sans hacks ni JavaScript. Cette astuce montre comment le faire proprement, en combinant accessibilité, cohérence visuelle et simplicité de maintenance.

Pour la suite de l'article, les valeurs seront exprimées sous forme de variables afin de faciliter la compréhension du code :

:root {
    /* Couleur du fond du conteneur de la scrollbar */
    --ui-scrollbar: #eaeaea; 
    /* Couleur du rail */
    --ui-scrollbar-track: #ddecf6;
    /* Couleur de la poignée */
    --ui-scrollbar-thumb: #0e93f0;
    /* Couleur de la poignée au survol */
    --ui-scrollbar-thumb-hover: #f05e0e;
    /* Largeur de la scrollbar verticale */
    --ui-scrollbar-vertical-width: 10px;
    /* Hauteur de la scrollbar horizontale */
    --ui-scrollbar-horizontal-height: 10px;
}

1. La méthode standard avec scrollbar-color et scrollbar-width

Actuellement, les propriétés standards scrollbar-color et scrollbar-width sont prises en charge par tous les navigateurs récents : Chrome, Edge, Firefox, Safari…

Elles permettent une personnalisation simple et rapide, mais assez limitée, des couleurs et de l’épaisseur :

html {
    scrollbar-color: var(--ui-scrollbar-thumb) var(--ui-scrollbar-track);
    scrollbar-width: auto;
}

• scrollbar-color : définit la couleur du thumb (la poignée) et du track (le rail).
• scrollbar-width : contrôle l’épaisseur de la scrollbar (auto, thin, ou none).

♿ Accessibilité

Pour des raisons de visibilité, il est déconseillé d’utiliser scrollbar-width: thin ou none. Cela peut rendre la scrollbar difficile à distinguer pour les personnes malvoyantes ou utilisant des technologies d’assistance.
Préférez scrollbar-width: auto, ou utilisez thin avec discernement, dans un contexte contrôlé.

2. Personnalisation avancée pour les navigateurs WebKit/Blink

Les pseudo-éléments ::-webkit-scrollbar-* permettent une personnalisation très fine de la scrollbar. Ils offrent un contrôle granulaire sur chaque composant :

::-webkit-scrollbar cible la scrollbar globale. On peut définir sa couleur d’arrière-plan ainsi que ses dimensions (largeur/hauteur) :

::-webkit-scrollbar {
    background: var(--ui-scrollbar);
    height: var(--ui-scrollbar-horizontal-height);
    width: var(--ui-scrollbar-vertical-width);
}

::-webkit-scrollbar-button les boutons (flèches haut/bas ou gauche/droite), souvent inutiles ou inesthétiques (mais on peut aussi les personnaliser si nécessaire) :

::-webkit-scrollbar-button {
    display: none;
}

::-webkit-scrollbar-corner évite l’affichage d’un carré de fond visible au croisement des scrollbars horizontale et verticale :

::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-track définit la couleur de fond du track (le rail) sur lequel se déplace la poignée :

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

::-webkit-scrollbar-thumb définit la couleur de la poignée, avec une variante au survol pour renforcer la visibilité ou l'interaction. On peut également ajouter un border-radius :

::-webkit-scrollbar-thumb {
    background-color: var(--ui-scrollbar-thumb);
    border-radius: calc(var(--ui-scrollbar-vertical-width) / 2);
}
    
::-webkit-scrollbar-thumb:hover {
    background-color: var(--ui-scrollbar-thumb-hover);
}

✅ Avantages :

• Permet une personnalisation très détaillée de chaque composant de la scrollbar.
• Complète la méthode standard sur les navigateurs ne prenant pas encore en charge scrollbar-color et scrollbar-width.
• Ne crée pas de conflit : chaque navigateur applique uniquement ce qu’il comprend.

⚠️ Problèmes :

• Si l’on déclare les propriétés standard (scrollbar-color / scrollbar-width) globalement, les styles ::-webkit-scrollbar-* ne seront pas appliqués sur les navigateurs WebKit/Blink récents (Chrome > 120, Edge > 120, Safari > 18.1).
• À l’inverse, si on ne déclare pas les propriétés standard, on perd la personnalisation dans Firefox.

Pour garder la personnalisation sur Firefox tout en conservant les possibilités avancées sur les navigateurs WebKit/Blink modernes, il faut passer par un petit hack CSS que nous allons voir dans la partie suivante.

3. Garder la finesse de personnalisation WebKit tout en conservant la méthode standard sur Firefox

Si l'on souhaite utiliser les possibilités de personnalisation via ::-webkit-scrollbar-* sur les navigateurs WebKit/Blink récents, tout en conservant la méthode standard avec scrollbar-color et scrollbar-width pour Firefox, il est possible de cibler uniquement ce dernier via @supports.

/* Scrollbars stylisées uniquement dans Firefox */
@supports (-moz-appearance: none) {
    html {
        scrollbar-color: var(--ui-scrollbar-thumb) var(--ui-scrollbar-track);
        scrollbar-width: auto;
    }
}

• Cette règle est ignorée par tous les navigateurs sauf Firefox.
• On conserve ainsi la personnalisation fine via ::-webkit-scrollbar-* sur Chrome, Safari et Edge.
• Et on profite d’un style natif cohérent dans Firefox, sans conflit de rendu.

4. Code final

:root {
    /* Couleur du fond du conteneur de la scrollbar */
    --ui-scrollbar: #eaeaea; 
    /* Couleur du rail */
    --ui-scrollbar-track: #ddecf6;
    /* Couleur de la poignée */
    --ui-scrollbar-thumb: #0e93f0;
    /* Couleur de la poignée au survol */
    --ui-scrollbar-thumb-hover: #f05e0e;
    /* Largeur de la scrollbar verticale */
    --ui-scrollbar-vertical-width: 10px;
    /* Hauteur de la scrollbar horizontale */
    --ui-scrollbar-horizontal-height: 10px;
}

/**
 * Applique le style standard des scrollbars uniquement dans Firefox,
 * permettant une personnalisation plus poussée avec les pseudo-éléments WebKit
 * dans les autres navigateurs modernes (Chrome, Safari, Edge).
 * Sans ce bloc, les règles `::-webkit-scrollbar` seront ignorées
 * dans Chrome > 120, Edge > 120 et Safari > 18.1,
 * car `scrollbar-color` les remplace s’il est défini globalement.
 */

@supports (-moz-appearance: none) {
  html {
    scrollbar-color: var(--ui-scrollbar-thumb) var(--ui-scrollbar-track);
    scrollbar-width: auto;
  }
}

/**
 * Pseudo-éléments WebKit utilisés pour une personnalisation avancée
 * dans tous les navigateurs modernes hors Firefox.
 * Ces styles sont désormais pleinement actifs car `scrollbar-color`
 * est limité à Firefox uniquement.
 */

/**
 * Style de la scrollbar native.
 */

::-webkit-scrollbar {
  background: var(--ui-scrollbar);
  height: var(--ui-scrollbar-horizontal-height);
  width: var(--ui-scrollbar-vertical-width);
}

/**
 * Masque les boutons de la scrollbar pour un rendu plus épuré.
 */

::-webkit-scrollbar-button {
  display: none;
}

/**
 * Style du rail (track) et de la poignée (thumb) de la scrollbar.
 */

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

::-webkit-scrollbar-thumb {
  background-color: var(--ui-scrollbar-thumb);
  border-radius: calc(var(--ui-scrollbar-vertical-width) / 2);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--ui-scrollbar-thumb-hover);
}

/**
 * Empêche l’apparition d’un fond dans le coin entre les scrollbars
 * horizontale et verticale.
 */

::-webkit-scrollbar-corner {
  background: transparent;
}