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

Por 9 Comentarios

Cómo personalizar los scrollbars con CSS o javascript

Archivado en —

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 por y Archivado en —

Cartas al Editor [ 9 ]

El autor de artículo y el blog estaremos encantados de leer tu opinión, críticas, corrrecciones, matizaciones, ampliaciones o cualquier comentario que su lectura te sugiera. Y lo agradecemos... siempre que esté hecho con educación, buenas maneras y respeto.
Para publicar código envuélvelo con la etiqueta [code] [/code].
Para insertar Pens de @codepen mira esta guía.

  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
  6. Me quedo con el mCustomScrollbar esta muy Cool

    ResponderEliminar
  7. como puede editar la apariencia de mi explorador de archivos en windows...tengo una extension en chrome que me si me cambia la forma por un scrollbar mas esbelto y de color azul,pero en windows no encuentro como hacer lo mismo...

    ResponderEliminar
    Respuestas
    1. Disculpa Francisco pero ¿qué tiene que ver con el explorador de archivos de windows este post o este blog?

      Eliminar