Personnaliser la couleur ou l'épaisseur d'une barre de défilement

Fonctionnalités Web : scrollbar-color scrollbar-width

Vous pouvez personnaliser l'apparence des barres de défilement à l'aide des propriétés CSS standards scrollbar-color et scrollbar-width.

  • scrollbar-color : accepte deux valeurs <color>. Le premier s'applique au curseur (la partie mobile) et le second à la piste (l'arrière-plan fixe).
  • scrollbar-width : accepte auto (par défaut), thin (une variante plus fine) ou none (masque complètement la barre de défilement tout en conservant la possibilité de faire défiler l'écran).

Appliquer scrollbar-color et scrollbar-width

OBLIGATOIRE : Utilisez scrollbar-color et scrollbar-width sur le conteneur à faire défiler.

Lorsque vous utilisez scrollbar-color, utilisez des variables CSS pour séparer les couleurs du curseur et de la piste, pour plus de lisibilité et de facilité de maintenance (en particulier lorsque vous utilisez des solutions de remplacement).

.scroller {
  --scrollbar-thumb: var(--color-neutral-70);
  --scrollbar-track: var(--color-neutral-90);

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

Stratégies de remplacement

Solutions de remplacement et compatibilité des navigateurs pour scrollbar-color

Cette fonctionnalité est une amélioration progressive et ne nécessite pas toujours de créations de remplacement.

Si le style est important et que la cible Baseline de l'utilisateur est "Baseline Widely Available" ou une version antérieure, vous DEVEZ inclure les pseudo-éléments non standards ::-webkit-scrollbar en tant que solutions de secours.

Encapsulez les solutions de remplacement d'anciennes versions dans un bloc @supports not (scrollbar-color: auto) pour éviter les conflits entre les propriétés standards et les anciens sélecteurs WebKit dans les navigateurs qui sont compatibles avec les deux de manière native.

Si vous utilisez des propriétés personnalisées pour définir des couleurs, elles seront automatiquement appliquées aux sélecteurs WebKit hérités. Vous n'avez PAS besoin de les dupliquer.

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}