Scrollbar ajustable con jQuery

Perfect Scrollbar es un pequeño plugin desarrollado con jQuery para la creación de scrollbars que se ajustan perfectamente a cualquier tamaño.

Dentro de sus principales características podemos destacar que su estilo visual puede ser modificado completamente por medio de CSS. Su utilización no requiere modificación alguna de nuestro proyecto, y finalmente, el tamaño del scrollbar puede ser actualizado en tiempo real y sin la necesidad de refrescar la pagina.

Ejemplo de scrollbar ajustable

En el ejemplo que muestro a continuación se puede observar como el scrollbar se actualiza una vez creado. Esto cuenta como principal ventaja la de permitir que nuestros diseños se adapten instantáneamente a los contenidos mostrados.

<script>
    function change_size() {
        var width = parseInt($("#Width").val());
        var height = parseInt($("#Height").val());

        if(!width || isNaN(width)) {
            width = 600;
        }
        if(!height || isNaN(height)) {
            height = 400;
        }
        $("#Demo").width(width).height(height);

        // update perfect scrollbar
        $('#Demo').perfectScrollbar('update');
    }
    $(function() {
        $('#Demo').perfectScrollbar();
    });
</script>

Podemos decir que Perfect Scrollbar tiene tres funciones básicas y una adicional que permite combinar una técnica básica de jQuery para posicionar un DIV (top) moviendo de esta manera todo el scrollbar:

//Mostrar como esta definida en el HTML:
$('#Demo').perfectScrollbar();

//Actualizar
$('#Demo').perfectScrollbar('update');

//Eliminar
$('#Demo').perfectScrollbar('destroy');

//Actualizar la posición
$("#Demo").scrollTop(0);
$("#Demo").perfectScrollbar('update');

Este proyecto cuenta con licencia MIT, lo que asegura que su utilización sea completamente libre. Esta licencia en general es la utilizada por todos los plugins jQuery y por muchos otros proyectos de este estilo.

Web: Perfect Scrollbar