Style de barre de défilement

Utilisez les propriétés scrollbar-width et scrollbar-color pour appliquer un style aux 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é standardisée par le groupe de travail CSS.

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

Barres de défilement 101

Anatomie d'une barre de défilement

Une barre de défilement est composée, au minimum, d'une piste et d'un curseur. La piste est la zone dans laquelle le pouce peut bouger. La piste représente toute la distance de défilement. Le curseur représente la position actuelle dans la zone déroulante. Lorsque vous faites défiler l'écran, il se déplace sur la piste. Le curseur est aussi souvent déplaçable.

Les barres de défilement peuvent toutefois comporter plus de parties que le curseur et la piste. Par exemple, une barre de défilement peut comporter un ou plusieurs boutons permettant d'augmenter ou de diminuer le décalage de défilement. Les parties qui constituent une barre de défilement sont déterminées par le système d'exploitation sous-jacent.

Barres de défilement classique et superposée

Avant d'apprendre à appliquer un style aux barres de défilement, il est important de comprendre la différence entre deux types de barres de défilement.

Barres de défilement en superposition

Les barres de défilement des superpositions sont des barres de défilement flottantes affichées au-dessus du contenu qui se trouve en dessous. Elles ne s'affichent pas par défaut, mais uniquement lorsque vous faites défiler activement la page. Le contenu en dessous est souvent semi-transparent, mais le système d'exploitation en décide autrement. Lorsque vous interagissez avec eux, leur taille peut également varier.

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 marge de la barre de défilement correspond à l'espace entre le bord de la bordure intérieure et le bord de la marge intérieure extérieure. Ces barres de défilement sont généralement opaques (non transparentes) et suppriment de l'espace par rapport au contenu adjacent.

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

Attribuer des couleurs 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 curseur, et la seconde la couleur à utiliser pour la piste.

.scroller {
  scrollbar-color: hotpink blue;
}

Lorsque vous utilisez une barre de défilement en superposition, la couleur de la piste n'a aucun effet par défaut. Toutefois, si vous passez la souris sur la barre de défilement, la piste s'affiche.

Pour utiliser le rendu par défaut fourni par le système d'exploitation, définissez la valeur 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 fonctionnalité de défilement.

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

• auto: largeur de la barre de défilement par défaut 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 la barre de défilement par défaut de la plate-forme.
• none: masque effectivement la barre de défilement. Toutefois, il est toujours possible de faire défiler l'élément.

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

.scroller {
  scrollbar-width: thin;
}

Lorsque vous utilisez une barre de défilement en superposition, le curseur ne s'affiche que lorsque vous faites défiler activement la zone à faire défiler.

Compatibilité avec les anciennes versions de navigateur

Pour prendre en charge les versions de navigateur qui ne sont pas compatibles avec scrollbar-color et scrollbar-width, vous pouvez utiliser à la fois 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 s'affiche toujours, ce qui la transforme en barre de défilement classique.

Pour garder l'illusion, vous pouvez choisir de ne changer que les couleurs lorsque vous passez la souris sur le conteneur de défilement.

.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. */
}