En el proyecto Immigrant Archive Project el diseño del sitio web es uno de los aspectos más importantes. Es por eso que surgió la necesidad de customizar la apariencia de las scrollbars en una de las pantallas HTML. Es aquí donde empezó primero el trabajo de investigación.

Luego de pasar por varios foros y blogs, encontré en un principio que había unos estilos en css que te permitían customizar la apariencia de las scrollbars, pero lamentablemente esta solución solo tenía efecto en IE mientras que en los demás browsers se seguían viendo las clásicas barras para scrollear, por lo tanto no fue viable.

Descartada esta opción, lo que siguió fue probar diferentes scripts hechos en javascript que nos permitan llegar a nuestro objetivo, hasta que encontré uno muy fácil de usar que se adaptó perfecto a los requerimientos:

FleXcroll (que dicho sea de paso no tiene nada que ver con Adobe Flex) es un componente que nos permite skinnear nuestras scrollbars llevando el problema solamente a estilear dichas barras con css. Es muy sencillo de usar ya que, a nivel html, lo único que tenemos que hacer es colocarle un estilo más al elemento html contenedor (respetando un par de estilos de css) y fleXcroll hace el resto.

Los pasos para skinnear son:

1. Bajamos el flexcroll.js de acá y lo incluimos en nuestro html.
2. Agregamos al atributo class del elemento html contenedor, al cual queremos customizar sus scrolls, el siguiente estilo: flexcroll.
3. Tomando un css de ejemplo de los ejemplos que bajamos antes de acá, incluimos los estilos utilizados para estilear nuestras scrollbars en un .css.

Tenemos estilos para todo lo que compone un scrollbar, tanto la parte central de las barras como las extremidades para hacer bordes redondeados, flechitas superior e inferior, etc. Podemos estilear tanto scrollbars verticales como horizontales.

y… taraaaaan… este es el resultado:

Para más información sobre el uso de este componente pueden entrar a la página de FleXcroll, la cual tiene muy buenas explicaciones, y también se pueden bajar el script con varios htmls de ejemplos de acá.