Scrollbar-color - Propriété CSS
Résumé des caractéristiques de la propriété scrollbar-color
autoautoscrollbar-color passe progressivement d'une valeur à une autre.Schéma syntaxique de scrollbar-color.
Description des termes utilisés sur le schéma :
xxxxxxest le code hexadécimal d'une couleur, avec 3, 6 ou 8 digits.nameest le nom d'une couleur (voir les couleurs nomées pour une liste des noms).colorest une couleur définie par l'une des fonctions CSS permettant de spécifier une couleur :rgb()ourgba(),hsl()ouhsla(),hwb(),lab(),oklab(),lch(),oklch(),color().
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).
Syntaxes 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 :
Valeurs globales
(communes à toutes les propriétés)
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.
Animation de la propriété 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).
Manipulation de la propriété scrollbar-color par programme.
Modifier la valeur de scrollbar-color en Javascript.
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';
let el = document.getElementById('id');
el.style.scrollbarColor = '#805010 silver';
Lire la valeur de scrollbar-color avec Javascript.
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'];
let el = document.getElementById('id');
let value = el.style.scrollbarColor;
Lire la valeur calculée de scrollbar-color avec Javascript.
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');
Modifier la valeur de scrollbar-color avec JQuery.
Les codes avec JQuery produisent un résultat équivalent à ceux de Javascript, mais avec une syntaxe plus courte.
$('#id').css('scrollbar-color', '#805010 silver');
Lire la valeur calculée de scrollbar-color avec JQuery.
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é 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é.
Simulateur.
Prise en charge par les navigateurs (compatibilité).
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).
scrollbar-color.
des barres
scrollbar-colorNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Voir aussi, dans le même module de standardisation que scrollbar-color.
Les spécifications CSS éditées par le W3C sont organisées en modules. scrollbar-color fait partie du module CSS - Stylisation des barres de défilement (CSS Scrollbars Styling Module). Les définitions suivantes sont également décrites dans ce même module.