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

À partir de la version 2 de Chrome, il est possible d'appliquer un style aux barres de défilement à l'aide des pseudo-éléments ::-webkit-scrollbar-*. Cette approche fonctionne bien dans Chrome et Safari, mais n'a jamais été standardisée par le CSS Working Group.

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

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 121
• <ph type="x-smartling-placeholder"></ph> 121
• <ph type="x-smartling-placeholder"></ph> 64
• <ph type="x-smartling-placeholder"></ph> X

Source

Barres de défilement 101

Anatomie d'une barre de défilement

Au minimum, une barre de défilement se compose d'une piste et d'un curseur. Le tracé désigne 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. Elle se déplace à l'intérieur de la piste lorsque vous faites défiler l'écran. Le pouce est aussi souvent déplaçable.

Toutefois, les barres de défilement peuvent contenir bien d'autres éléments que le curseur et la piste. Par exemple, une barre de défilement peut comporter un ou plusieurs boutons pour incrémenter ou diminuer 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.

<ph type="x-smartling-placeholder">

</ph>

Illustration des parties qui composent une barre de défilement. L'illustration à gauche est une barre de défilement minimale avec uniquement une piste et un pouce. Celui de droite comporte également des boutons.

Barres de défilement classiques et en superposition

Avant d’examiner 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 superposées

Les barres de défilement en superposition sont des barres de défilement flottantes affichées au-dessus du contenu situé en dessous. Elles ne s'affichent pas par défaut, mais uniquement lorsque vous faites défiler la page. Pour que le contenu en dessous reste visible, ils sont souvent semi-transparents, mais c'est au système d'exploitation de décider. Lors de l'interaction avec eux, leur taille peut également varier.

<ph type="x-smartling-placeholder">

</ph>

Illustration d'un navigateur avec une barre de défilement superposée. La barre de défilement se superpose au contenu. le pouce est partiellement transparent.

Barres de défilement classiques

Les barres de défilement classiques sont des barres de défilement 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 occupent de l'espace par rapport au contenu adjacent.

<ph type="x-smartling-placeholder">

</ph>

Illustration d'un navigateur avec une barre de défilement classique. La barre de défilement est positionnée à côté du contenu, dans une zone dédiée. la largeur disponible du contenu est réduite par rapport à la largeur disponible lorsque des barres de défilement en superposition sont utilisées.

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

Attribuer 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 curseur, et la seconde celle à utiliser pour le titre.

.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, le titre s'affiche.

Démonstration: Appliquer un style aux barres de défilement: scrollbar-color

Pour utiliser le rendu par défaut fourni par le système d'exploitation, utilisez auto comme valeur.

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 ou même de la masquer complètement sans affecter la capacité de défilement.

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 la barre de défilement par défaut de la plate-forme.
• none: masque efficacement 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 <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.

Démonstration: Appliquer un style aux barres de défilement: scrollbar-width

Compatibilité avec les anciennes versions de navigateur

Pour répondre aux besoins des versions de navigateur qui ne sont pas compatibles avec scrollbar-color et scrollbar-width, vous pouvez 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);
    }
}

Démonstration: Styliser les barres de défilement à l'aide de scrollbar-* avec un remplacement à ::-webkit-scrollbar-*

.

Notez que lorsque vous définissez width ou height pour ::-webkit-scrollbar, une barre de défilement en superposition s'affiche toujours, 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 le curseur.

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

Démonstration: Styliser les barres de défilement à l'aide de scrollbar-* avec un remplacement par ::-webkit-scrollbar-*, en appliquant uniquement les couleurs ::-webkit-scrollbar-* lorsque l'utilisateur pointe dessus

.