Scrollbar-color - Propriété CSS

Schéma de la syntaxe de scrollbar-color.

Description des termes utilisés sur le schéma :

• xxxxxx est le code hexadécimal d'une couleur, avec 3, 6 ou 8 digits.
• name est le nom d'une couleur (voir Nuancier pour une liste des noms).
• color est une couleur définie par l'une des fonctions CSS permettant de spécifier une couleur : rgb() ou rgba(), hsl() ou hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().

Description de la propriété scrollbar-color.

scrollbar-color définit deux couleurs qui seront appliquées aux barres de défilement. C'est, avec scrollbar-width, les deux propriétés qui permettent de personnaliser les barres de défilement.

Les deux couleurs définies par scrollbar-color lorsqu'elles sont appliquées à une barre de défilement standard.

Et les mêmes couleurs appliquées à une barre de défilement étroite (scrollbar-width:thin).

Valeurs pour scrollbar-color.

• scrollbar-color: auto;

  Affichage des barres de défilement avec les couleurs habituelles.

• scrollbar-color: black white;

  Deux indications de couleurs, séparées par un espace. La première s'applique au curseur des barres de défilement, la deuxième aux glissières. Toutes les spécification de couleurs reconnues par CSS peuvent être utilisées :

  • Code hexadécimal de la couleur. Exemple #804218.
  • Nom d'une couleur standard : voir Nuancier.
  • L'une des nombreuses fonctions reconnues par CSS : rgb() ou rgba(), hsl() ou hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().
• scrollbar-color: initial; (auto) scrollbar-color: inherit; scrollbar-color: revert; scrollbar-color: revertLayer; scrollbar-color: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de scrollbar-color.

Un exemple d'animation de la propriété scrollbar-color est donné ci-dessous. L'effet est plus spectaculaire avec des barres du type thin (voir la propriété scrollbar-width pour changer le style des barres de défilement).

Accéder à la propriété scrollbar-color par programme.

Avec Javascript, modifier la valeur de scrollbar-color.

Voici deux exemples de code Javascript pour modifier la valeur de scrollbar-color. Le premier utilise la notation typique de CSS, en kebab-case, et le deuxième en notation en camel-case.

let el = document.getElementById('id'); el.style['scrollbar-color'] = '#805010 silver'; // ou let el = document.getElementById('id'); el.style.scrollbarColor = '#805010 silver';

Avec Javascript, lire la valeur de scrollbar-color.

Le code ci-après récupère la valeur de la propriété si celle-ci a été affectée directement à l'élément lui-même et pas en passant par un sélecteur. Les couleurs sont renvoyées soit par leur nom s'il s'agit de couleurs nommées, soit avec la syntaxe rgb() ou rgba().

let el = document.getElementById('id'); let value = el.style['scrollbar-color']; // ou let el = document.getElementById('id'); let value = el.style.scrollbarColor;

Avec Javascript, lire la valeur calculée de scrollbar-color.

La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages : valeur affectée à l'élément, à défaut, valeur héritée, ou sinon valeur initiale.

Dans le cas de scrollbar-color, les deux couleurs sont retournées sous la forme rgb(r,g,b), ou rgba(r,g,b,a) si l'opacité n'est pas totale.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('scrollbar-color');

Avec JQuery, modifier la valeur de scrollbar-color.

Les codes avec JQuery produisent un résultat équivalent à ceux de Javascript, mais avec une syntaxe plus courte.


$('#id').css('scrollbar-color', '#805010 silver');
// ou
$('#id').css('scrollbarColor', '#805010 silver');


Avec JQuery, lire la valeur calculée de scrollbar-color.

let value = $('#id').css('scrollbar-color');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété scrollbar-color et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Avec scrollbar-color, la valeur calculée est systématiquement convertie en notation rgb() ou rgba() quelque soit la syntaxe utilisée pour définir la propriété.

Exemple interactif avec la propriété scrollbar-color.

Compatibilité des navigateurs avec scrollbar-color.

Cette propriété, comme toutes celles qui concernent la stylisation des barres de défilement, est encore trop peu traitée par les navigateurs (2023).

Remarques :

(1) Supporte la stylisation des barres de défilement via un sélecteur : ::-webkit-scrollbar.

(2) Supporte seulement la couleur via une propriété préfixée. Pas de propriétés pour définir l'apparence des barres de défilement.

1

Stilisation
des barres

2

Propriété
scrollbar-color

Estimation de la prise en charge globale.

73%

73%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

2

UC Browser pour Androïd

1

Opéra Mobile

1

QQ Browser

1

Baidu Browser

1

Samsung Internet

Firefox

Safari

1

Safari sur IOS

Chrome

Opéra

Edge

Chrome pour Androïd

Firefox pour Androïd

Androïd Brower

1

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété scrollbar-color.

• Module CSS - Stylisation des barres de défilement - Niveau 1

  Première présentation de la propriété scrollbar-color.
  

  25 Septembre 2018

  Document de travail.

  

  09 Décembre 2021

  Candidat à la recommandation.

  

  

Voir aussi, dans le même module que scrollbar-color.

Le module de spécification qui traite de scrollbar-color s'appelle CSS Scrollbars Styling Module, il traite de tout ce qui concernent la stylisation des barres d'outils.

Propriétés :