Style de barre de défilement

Utilisez les propriétés scrollbar-width et scrollbar-color pour styliser les barres de défilement.

Bramus

Introduction

Depuis la version 2 de Chrome, il est possible de styliser les barres de défilement avec les pseudo-éléments ::-webkit-scrollbar-*. Cette approche fonctionne bien dans Chrome et Safari, mais n'a jamais été normalisée par le groupe de travail CSS.

Les propriétés scrollbar-width et scrollbar-color, qui font partie de la spécification du module de style des barres de défilement CSS, niveau 1, ont été normalisées. Ces propriétés sont compatibles à partir de Chrome 121.

Principes de base des barres de défilement

Anatomie d'une barre de défilement

Une barre de défilement se compose au minimum d'une piste et d'un curseur. La piste est la zone dans laquelle le curseur peut se déplacer. La piste représente la distance de défilement totale. Le pouce représente la position actuelle dans la région à faire défiler. Lorsque vous faites défiler l'écran, il se déplace dans la piste. Le pouce est souvent également déplaçable.

Cependant, les barres de défilement peuvent comporter d'autres éléments que le pouce et la piste. Par exemple, une barre de défilement peut comporter un ou plusieurs boutons permettant d'incrémenter ou de décrémenter le décalage de défilement. Les parties qui composent une barre de défilement sont déterminées par le système d'exploitation sous-jacent.

Barres de défilement classiques et superposées

Avant de voir comment styliser les barres de défilement, il est important de comprendre la distinction entre deux types de barres de défilement.

Barres de défilement en superposition

Les barres de défilement superposées sont des barres de défilement flottantes affichées au-dessus du contenu sous-jacent. Ils ne s'affichent pas par défaut, mais uniquement lorsque vous faites défiler l'écran. Pour que le contenu situé en dessous reste visible, elles sont souvent semi-transparentes, mais c'est au système d'exploitation de décider. Leur taille peut également varier lorsque vous interagissez avec eux.

Barres de défilement classiques

Les barres de défilement classiques sont placées dans une gouttière de barre de défilement dédiée. La gouttière de la barre de défilement est l'espace entre le bord intérieur et le bord extérieur de la marge intérieure. Ces barres de défilement sont généralement opaques (non transparentes) et prennent de la place sur le contenu adjacent.

Propriétés scrollbar-color et scrollbar-width

Donner une couleur aux barres de défilement avec scrollbar-color

La propriété scrollbar-color vous permet de modifier le jeu de couleurs des barres de défilement. La propriété accepte deux valeurs <color>. La première valeur <color> détermine la couleur du bouton et la seconde, celle de la piste.

.scroller {
  scrollbar-color: hotpink blue;
}

Lorsque vous utilisez une barre de défilement superposée, la couleur de la piste n'a aucun effet par défaut. Toutefois, la barre de défilement s'affiche lorsque vous pointez dessus.

Pour utiliser le rendu par défaut fourni par le système d'exploitation, définissez sa valeur sur auto.

Modifier la taille de la barre de défilement avec scrollbar-width

La propriété scrollbar-width vous permet de choisir une barre de défilement plus étroite, voire de la masquer complètement sans affecter la possibilité de défiler.

Les valeurs acceptées sont auto, thin et none.

• auto : largeur par défaut de la barre de défilement fournie par la plate-forme.
• thin : variante fine de la barre de défilement fournie par la plate-forme ou barre de défilement personnalisée plus fine que celle par défaut de la plate-forme.
• none : masque efficacement la barre de défilement. L'élément reste toutefois défilable.

Il n'est pas possible d'utiliser un <length> tel que 16px comme valeur pour scrollbar-width.

.scroller {
  scrollbar-width: thin;
}

Lorsque vous utilisez une barre de défilement superposée, le pouce n'est dessiné que lorsque vous faites défiler activement la zone de défilement.

Compatibilité avec les anciennes versions de navigateur

Pour les versions de navigateur qui ne sont pas compatibles avec scrollbar-color et scrollbar-width, il est possible d'utiliser les nouvelles propriétés scrollbar-* et ::-webkit-scrollbar-*.

.scroller {
    --scrollbar-color-thumb: hotpink;
    --scrollbar-color-track: blue;
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 10px;
}

/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    .scroller {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
    .scroller::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    .scroller::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    .scroller::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}

Notez que lorsque vous définissez le width ou le height de ::-webkit-scrollbar, une barre de défilement superposée est toujours affichée, ce qui la transforme en barre de défilement classique.

Pour conserver l'illusion, vous pouvez choisir de ne modifier les couleurs que lorsque vous pointez sur le sélecteur.

.scroller::-webkit-scrollbar-thumb {
    background: transparent;
}
.scroller::-webkit-scrollbar-track {
    background: transparent;
}
.scroller:hover::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color-thumb);
}
.scroller:hover::-webkit-scrollbar-track {
    background: var(--scrollbar-color-track);
}

.scroller:hover {
    --fix: ; /* This custom property invalidates styles on hover, thereby enforcing a style recomputation. This is needed to work around a bug in Safari. */
}