Cambiar las barras de desplazamiento con jQuery

jScrollPane es un plugin de jQuery que nos permite darle un aspecto gráfico a las barras de desplazamiento de cualquier elemento, algo que en Internet Explorer es muy simple porque basta usar CSS pero que el resto de los navegadores jamás se ha implementado; cosa rara y absurda pero, hay de todo en este mundo.

Para usarlo, obviamente necesitamos jQuery que podemos cargar desde las librerías de Google así que antes de </head> ponemos:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' />

A continuación un script optativo que nos permitirá usar la rueda del ratón:

<script type='text/javascript' src='URL_mousewheel.js' />

y por último el plugin en si mismo, ya sea en su versión normal o minimizada:

<script type='text/javascript' src='URL_jscrollpane.min.js' />

Si no queremos usar archivos externos, estos dos últimos pueden agregarse directametne en la plantilla:

<script type='text/javascript'>
//<![CDATA[
  // acá pegamos el contenido del archivo mousewheel.js
  // acá pegamos el contenido del archivo jscrollpane.min.js
//]]>
</script>

Como todo, requiere sus reglas de estilo así que debajo agregamos esto que es lo mínimo necesario aunque hay más definiciones si queremos utilizar algunas de las opciones:

<style>
  .jspContainer {
    overflow: hidden;
    position: relative;
  }
  .jspPane {position: absolute;}
  .jspVerticalBar {
    background-color: #000;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 16px; /* define el ancho de la barra vertical */
  }
  .jspHorizontalBar {
    background-color: #000;
    bottom: 0;
    height: 16px;  /* define el alto de la barra horizontal */
    left: 0;
    position: absolute;
    width: 100%;
  }
  .jspVerticalBar *, .jspHorizontalBar * {margin: 0; padding: 0;}
  /* estas son las reglas que permiten configurar el plugin */ 
  .jspTrack { /* es el rectángulo donde se desplaza del slider */
    background-color: #000;
    position: relative;
  }
  .jspDrag { /* es el slider en si mismo */
    background-color: #888;
    cursor: pointer;
    left: 0;
    position: relative;
    top: 0;
  }
  .jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {
    float: left;
    height: 100%;
  }
</style>

Con eso ya está todo listo para que podamos utilizarlo en cualquier parte. Para eso, basta que definamos una o varias clases; por ejemplo:

</style>
  .scroll-pane {height: 200px; overflow: auto; width: 100%;}
  .horizontal {height: auto; max-height: 200px;}
</style>

<div style="width: 500px;">
  <div class="scroll-pane">
    <p> ....... el contenido a mostrar ... </p> 
  </div>
</div>

<div style="width: 500px;">
  <div class="scroll-pane horizontal">
    <p style="width: 1000px;"> ....... el contenido a mostrar ... </p> 
  </div>
</div>

Y llamamos a la función usando la clase que hemos definido:

<script type="text/javascript">
  $(function() { $('.scroll-pane').jScrollPane(); });
</script>

Las posibilidades son múltiple, en la página del desarrollador hay varios demos explicativos donde se combinan las barra, se agregan botones, etc.