Cambiar el color de las barras del scroll

Cambiar el color de las barras del scroll.

Si queremos cambiar el color de las barras de scroll de nuestra página web, lo más sencillo es hacerlo mediante las CSS. Como aviso te comento que este tipo de propiedades no están soportadas por el estándar CSS de W3C (no es que te vaya a generar algún error, simplemente que no es soportado por todos los navegadores existentes… como por ejemplo el super-obsoleto Internet Explorer 5.5).

Que no sea soportado, no quiere decir que se corrompa tu sitio web, no. Lo que pasara es que omitirá esas propiedades y tomara las del sistema.

Las propiedades CSS de un scroll que podemos utilizar son:

  • scrollbar-3dlight-color: Color del borde con efecto 3D en la barra del scroll.
  • scrollbar-arrow-color: Color de las flechas.
  • scrollbar-base-color: Color genérico a usar por la barra del scroll.
  • scrollbar-darkshadow-color: Sombreado de la barra de progreso.
  • scrollbar-face-color: Color del bloque que sube y baja por la barra del scroll..
  • scrollbar-highlight-color: Color del fondo de la barra.
  • scrollbar-shadow-color: Flechas sobre las que podemos pulsar para desplazar la barra.
  • scrollbar-track-color: Color de fondo de la barra de scroll.

 

Cambiar color de la barra scroll

Cambiar al color es una tarea muy sencilla, tan solo debes abrir tu archivo “CSS” principal y agregar las propiedades que te interesen, por ejemplo:

Como puedes ver en el ejemplo las propiedades las asignamos al elemento HTML body, de esta manera afectara a todos los elementos con scroll de la página web.

Ahora, debemos agregar a nuestra pagina el elemento scroll.

Usaremos un textarea.

 

Por ejemplo…

y ya lo tenemos.

 

Espero te sea de utilidad este articulo.

Cambiar el color de las barras del scroll
4.5 (90%) 2 Votos

Agregar comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.