Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.
Obsolète
Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.
La propriété CSS -ms-scrollbar-track-color est une propriété spécifique à Microsoft qui permet de définir la couleur de la piste utilisée pour les barres de défilement.
Syntaxe
Valeurs
<color>-
La couleur à utiliser pour la piste (cf.
<color>).
Syntaxe formelle
<color>où
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>où
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )où
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
Exemples
L'exemple qui suit utilise -ms-scrollbar-track-color, -ms-scrollbar-face-color ainsi que -ms-scrollbar-arrow-color afin de créer deux éléments <div> disposants d'un thème chacun pour les barres de défilement.
CSS
div {
width: 150px;
height: 150px;
border-style: solid;
border-width: thin;
overflow-y: scroll;
font-family: sans-serif;
float: left;
margin-right: 10px;
}
.blueScroll {
-ms-scrollbar-highlight-color: aqua;
-ms-scrollbar-face-color: blue;
-ms-scrollbar-arrow-color: blue;
border-color: blue;
}
.redScroll {
-ms-scrollbar-highlight-color: bisque;
-ms-scrollbar-face-color: red;
-ms-scrollbar-arrow-color: red;
border-color: red;
}
HTML
<div class="blueScroll"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div class="redScroll"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div>
Résultat
L'image suivante illustre le résultat obtenu :
Spécifications
Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.
| Valeur initiale | Scrollbar |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Compatibilité des navigateurs
| Ordinateur | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
-ms-scrollbar-track-color | Chrome Aucun support Non | Edge Aucun support Non | Firefox Aucun support Non | IE
Support complet
5
| Opera Aucun support Non | Safari Aucun support Non | WebView Android Aucun support Non | Chrome Android Aucun support Non | Firefox Android Aucun support Non | Opera Android Aucun support Non | Safari iOS Aucun support Non | Samsung Internet Android Aucun support Non |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support
- Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
- Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
- Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
- Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
- Cette fonctionnalité utilise un nom non-standard.
- Cette fonctionnalité utilise un nom non-standard.
Notes
Pour IE 8, la propriété -ms-scrollbar-track-color est une extension et peut être utilisée comme synonyme de scrollbar-track-color en mode standard.
La piste est l'élément de la barre sur laquelle on déplace le curseur verticalement ou horizontalement
Cette propriété s'applique aux éléments affichant une barre de défilement. Pour activer le défilement sur différents éléments, voir la propriété overflow.