Personnalisation des barres de défilement.

Valeurs prédéfinies
auto | thin | none
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Non.
Discrète : lors d'une animation, la propriété scrollbar-width passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Stylisation des barres de défilement
Statut du document: CR (document candidat à la recommandation)
-->

Description des propriétés de personnalisation des barres de défilement.

Attention ! Ces propriétés ne sont pas standardisées par le W3C.
Évitez absolument de les utiliser.

Le rôle de ces propriétés est de définir les couleurs des différentes parties qui constituent les barres de défilement (ascenseurs) : les flèches, la glissière, etc.

Les nouvelles possibilités de personnalisation pour les barres de défilement sont à l'étude dans le module CSS Scrollbars Styling Module Level 1.

Exemple.

Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia.

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

Pour faire fonctionner ce simulateur, vous devrez utiliser un vieux navigateur : Internet Explorer.

scrollbar-arrow-color :
scrollbar-track-color :
scrollbar-3dlight-color :
scrollbar-base-color :
scrollbar-base-darkshadow-color :
scrollbar-face-color :
scrollbar-highlight-color :
scrollbar-shadow-color :
Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia.

Prise en charge par les navigateurs (compatibilité).

Ces propriétés ne sont pas standardisées. Elles ne sont reconnues par aucun des navigateurs actuels.

Colonne 1
Prise en charge par les navigateurs de la personnalisation des barres de défilement.
Colonne 2
Prise en charge par les navigateurs de la propriété scrollbar-width qui gère l'épaisseur des barres de défilement.

Remarques :

(1) 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.

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

1
Stilisation
des barres
2
Propriété
scrollbar-width
Estimation de la prise en charge globale.
73%
85%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Firefox

Safari

Safari sur IOS

Chrome

Opéra

Edge

Chrome pour Androïd

Firefox pour Androïd

Androïd Brower

KaiOS Browser

Opéra mini

Voir aussi, au sujet des barres.

Les nouvelles spécifications CSS concernant les barres d'outils sont regroupés ici : Module CSS - Stylisation des barres de défilement.

Propriétés :

scrollbar-color
Définit deux couleurs qui seront utilisées pour les barres de défilement.
Scrollbar-width
Définit le style (et la taille) des barres de défilement.