Si queremos cambiar el color de las barras de scroll de nuestra página podemos utilizar propiedades CSS. Si bien tenemos que tener en cuenta que estas propiedades no están soportadas por el estándar CSS de la W3C.
Es decir, depende del navegador web que estemos utilizando y del soporte que se tenga sobre estos elementos. Utilizando la página CanIUse podemos comprobar que el soporte de estas propiedades. Podemos ver que se realiza solo en el navegador Internet Explorer desde Internet Explorer 5.5 hasta Internet Explorer 11.
Las propiedades CSS de scroll que podemos utilizar son las siguientes:
- scrollbar-3dlight-color, color del borde que hace el efecto 3D en la barra de scroll.
- scrollbar-arrow-color, color de las flechas.
- scrollbar-base-color, es el color genérico a utilizar por la barra de scroll. Podríamos utilizar únicamente este para dar color a la barra.
- scrollbar-darkshadow-color, sombra de la barra de progreso.
- scrollbar-face-color, el color de lo que es realmente la barra de progreso. Es decir, del bloque que se mueve por la barra.
- scrollbar-highlight-color, el color del fondo de la barra.
- scrollbar-shadow-color, son los dos botones sobre los que podemos pulsar para desplazar la barra.
- scrollbar-track-color, es el color de fondo de la barra de scroll.
A las propiedades las asignaremos un color dentro de un área de código CSS. Quedará como el código que sigue:
body {
scrollbar-face-color:fuchsia;
scrollbar-highlight-color:yellow;
scrollbar-3dlight-color:orange;
scrollbar-darkshadow-color:darkblue;
scrollbar-shadow-color:gray;
scrollbar-arrow-color:yellow;
scrollbar-track-color:aqua;
}
Vemos que las propiedades las asignamos al elemento body del lenguaje HTML, para que de esta manera afecte a todos los elementos con scroll de la página.
Solo nos quedará añadir a nuestra página un elemento que tenga scroll. Para ello utilizamos un textarea.
<textarea rows="15">... </textarea>
Hay que indicar, que no hemos encontrados un navegador que aplique esto al scroll de la propia página. Aunque se pueda quedar en anecdótico, siempre es interesante las cosas que se han hecho para dar estilo y en concreto este caso que nos permite cambiar el color de las barras de scroll.
