Cómo personalizar Scrollbars: desplázate con estilo.

La apariencia de las barras de desplazamiento o scrollbars en un principio depende del navegador usado por el visitante. El cómo lucen es cuestión del la piel que hayamos elegido para vestirlo.
Y aunque en la mayoría de las veces es un detalle al que no se le presta atención en el diseño de las páginas, ya sea por respeto al usuario al no cambiar su UI o por cualquier otra razón, hay diseños que piden a gritos desgarradores una manita.

Vamos a ver diversas formas de actuar para cambiar la apariencia de los scrolls

Estilizar Scrollbars con Css

El hacerlo vía css tiene un pero insalvable: no es multinavegador. Y los que sí admiten estilos, prefijos obligados, lo hacen con propiedades y sintaxis totalmente diferentes

Scrollbars en Webkit

Webkit tiene una serie de pseudoelementos para afectar la apariencia de las barras de desplazamiento. El uso del prefijo privativo -webkit- es lógicamente obligatorio:

  1. scrollbar
  2. scrollbar-button
  3. scrollbar-track
  4. scrollbar-track-piece
  5. scrollbar-thumb
  6. scrollbar-corner
  7. resizer

Y junto a éstas, una serie de pseudoclases para cambiar la apariencia del scroll aplicadas a los anteriores:

  1. :horizontal
  2. :vertical
  3. :start
  4. :end
  5. :decrement
  6. :increment
  7. :double-button
  8. :single-button
  9. :no-button
  10. :corner-present
  11. :window-inactive

Que pueden ser usadas junto a las pseudoclases :enabled, :disabled, :hover y :active

Más Info

  1. Toda la info sobre estas propiedades en Webkit.
  2. Artículo en Css-Tricks
  3. Artículo en beautifulpixels
  4. Artículo de David Walsh
  5. Ejemplos y demos hay muchos ahí afuera: 1 y 2 y en el editor de Codepen

Scrollbars en IE

Internet Explorer, desde la ver. 5.5 creo recordar, también permite actuar en sobre los scrolls. Pero ya te adelanto, sólo en los colores. No he intentado, aunque imagino, que no admite ni sombras ni degradados ni modificaciones en otros aspectos como el tamaño. Parece que sólo colores planos

En este enlace tienes las propiedades privativas de IE, pero la estética es la de aquel entonces del 5.5:

  1. scrollbar-3dlight-color
  2. scrollbar-arrow-color
  3. scrollbar-base-color
  4. scrollbar-darkshadow-color
  5. scrollbar-face-color
  6. scrollbar-highlight-color
  7. scrollbar-shadow-color

Y aquí un generador de los códigos del propio Microsoft. Como ves en la imagen, hay que trabajárselo más, mucho más.

Scrollbars en Opera con Css

Parece que aceptaba las propiedades anteriores, pero teniendo que modificar el usuario en la configuración del navegador (about: config) la opción "Enable Scrollbar Colors" en alguna versión. En la 12 lo está por defecto. Un ejemplo

Estilos al scrollbar con css en Firefox

Definitivamente, firefox no da soporte a ninguna propiedad que permita modificar con css la apariencia de los scrolls.

Así que, después de ver la disparidad de las formas y soporte a la vía del Css para estilizar los scrollbars de una página, no parece que sea lo más acertado optar por ella.
Así que el camino a seguir debe ser otro. Por mucho que duela reconocer esta carencia en Css.

Personalizar scrollbars con Javascript

Hay multitud de scripts para cambiar la apariencia de las barras de desplazamiento utilizando javascript. Lo más normal es que sea a través de algún pluging para cualquier librería de las conocidas:

jScrollPane

jScrollPane

es todo un clásico. Plugin para jQuery.

Malihu Custom Scrollbar

Malihu Custom Scrollbar también para jQuery.

FleXcroll

Otro cásico: FleXcroll

Plugin JQuery : Scrollbar

Perfect scrollbar

También para jQuery

Perfect scrollbar

Pero hay muchos más en la red. Sólo tienes que preguntar a san google, por ejemplo: Uno y otro y otro y otro...

Publicado el 27 de septiembre de 2012 y Archivado en

Y para terminar, como agradecimiento a tu visita, déjame que te haga estas sugerencias:

Suscríbete a los artículos.

Nada de spam. Sólo avisos de nuevos posts.

Comparte y sorprende.

votar

También puedes ir a alguno de estos artículos que tienen relación con el que acabas de ver:

Ecos G+

6 comentarios :

  1. Que buen articulo... muchas gracias

    ResponderEliminar
  2. Si me permiten, agrego un detalle que confunde a mucha gente (alguno no tan novato): javascript (o su hijo JQuery) no pueden modificar las barras de desplazamiento mucho más de lo que lo hace CSS. Esas scrollbars tan sofisticadas (y a veces tan inútiles) son imitaciones creadas con capas que reemplazan a las verdaderas; por eso pueden tener cualquier forma, pero no siempre la capacidad de las originales.

    ResponderEliminar
  3. Muy útil, justo lo que estaba buscando. Muchas gracias.

    ResponderEliminar
  4. pues con javascript la haces comptable para todos lo navegadores cierto?

    ResponderEliminar
    Respuestas
    1. Sí, es compatible pero no pueden hacer todas las funciones que hacen las originales, porque, como indica Furoya en este comentario, lo que hace javascript es esconder las originales y crear unos DIVs que imitan las barras y que se le pueden aplicar estilos.

      Eliminar
  5. muy buena pagina amigo, sigue asi. Saludos.

    ResponderEliminar