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

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

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

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

FleXcroll

Plugin JQuery : Scrollbar

Perfect scrollbar

También para jQuery

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.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso