Custom scrollbars for Chrome, Firefox & IE. Personaliza Scrollbars y desplázate con estilo.

Por 9 Comentarios

Cómo personalizar los scrollbars con CSS o javascript. Actualizado con 2 formas de hacerlo con puro Css funcional incluso para Firefox.

Archivado en —

Artículo publicado originalmente el 27-09-2012 y ampliado el 6-09-2014 para incluir 2 formas de hacerlo con css funcional hasta en Firefox.

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 las barras de desplazamiento o scrollbar

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
elementos que conforman las barras de scroll
Crédito imagen: Css-tricks

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.

Actualizado

Con la llegada y soporte de los modos de fusión Css (blend modes) sí es posible modificar parcialmente la apariencia de las scrollbars en Firefox. Pero sólo en lo concerniente a su tonalidad de color.

See the Pen Text & scroll tinted by Kseso (@Kseso) on CodePen.

Nuevo Si no puedes, haz que lo parezca

Otra forma de enfocar la cuestión de personalizar las barras de desplazamietno es prescindir de ellas y recrearlas. Como apunta Furoya en los comentarios, es lo que hace javascript para conseguirlo. Todo se reduce a esconder las verdaderas scrollbars y sustituirlas por otros elementos a los que Css sí pueda estilizar.

En este caso de ejemplo, la barra de desplazamiento vertical está conformada con los label´s de los input´s utilizados para lograr el desplazamiento. Técnica que ya hemos visto en el blog en infinidad de demos.

See the Pen Custom scrollbars for all navs by Kseso (@Kseso) on CodePen.

El precio a pagar es que el arrastre no funciona. Sólo pinchando en el espacio vacío del scroll.

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
Malihu Custom Scrollbar también para jQuery

FleXcroll

FleXcroll
Otro cásico: FleXcroll

Plugin JQuery : Scrollbar

Plugin JQuery : Scrollbar
Plugin JQuery : Scrollbar

Perfect scrollbar

También para jQuery

Perfect scrollbar
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...

Artículo publicado originalmente el 27-09-2012 y ampliado el 6-09-2014 para incluir 2 formas de hacerlo con css funcional hasta en Firefox.

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