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

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