Scrollbar con jQuery y CSS

Scrollbar con jQuery y CSS

En diseño web cada vez se ve menos el scroll. De todos modos, hay veces en los que es necesario y si además podemos meter una barra diseñada por nosotros y ocultarla, mejor que mejor.

Este código nos permite ocultar la barra de desplazamiento, apareciendo cuando nos situamos encima de la zona de acción. Un ejemplo que podemos ver en la actividad en tiempo real de Facebook. Este ejemplo está realizado con  jQuery y CSS.

Tympanus.net nos muestra dos ejemplos, en el primero la barra de desplazamiento aparece cuando entramos en la zona con el ratón, y desaparece cuando salimos y después de cierto tiempo de inactividad.

El ejemplo 2 es más simple, la barra aparece y desaparece en función de si estamos o no encima de la zona.

La zona que va a contener la capa scrollable es:

<div id="jp-container" class="jp-container">
    <!-- content -->
</div>

El CSS utilizado para dicha capa es bien simple:

.jp-container{
    width:500px;
    height:400px;
    position:relative;
    background:#fff;
    border:1px solid #D8DFEA;
    float:left;
}

Se trata sin duda, de una alternativa mucho más eficaz y usable que la habitual