Darle Estilos al ScrollBar

En ocaciones queda muy bien esto de modificar un poco los colores de los scroll-bars (HTML), en otras no; pero en este caso hablaremos de las primeras.

La idea es darle el estilo mediante el uso de hojas de estilos en cascada (algunos colores acordes al sitio, que reemplazen al grig predeterminado), con las siguientes propiedades:

  • 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.

Éstas propiedades deben ser adjudicadas al body; así se aplicarán a todos los elementos que estén dentro del mismo. Se aclara que no se verá modificado el scroll propio del navegador.

Ésto funciona sólo en algunos navegadores, ya que no están soportadas por el estándar CSS de la W3C.

Vía: Linea de Código