Baron.js: Scrollbar vertical con control de navegación

Baron.js es una scrollbar vertical con control de navegación, que si bien puede funcionar con jQuery no posee fuertes dependencias con este framework. Convirtiendo al proyecto en una solución pequeña pero no por eso menos efectiva.

Su principal característica es la de funcionar perfectamente en la gran mayoría de los navegadores modernos, por otro lado no reemplaza el mecanismo nativo de scroll del sistema, sin embargo permite cambiar su aspecto visual desde las hojas de estilo, logrando una integración prácticamente absoluta en cualquier plataforma.

Otro detalle interesante es que podemos fijar los encabezados, esto es una cualidad muy deseada cuando los contenidos son muy extensos.

slider transparente

Ejemplo de uso:

Incluimos la biblioteca en nuestro proyecto:

<script src="baron.js"></script>

Estructura HTML:

<div class="wrapper">
    <div class="scroller">
        <div class="container">
            Your scrollable content here
        </div>
        <div class="scroller__bar"></div>
    </div>
</div>

CSS:

.wrapper {
    position: relative;
    overflow: hidden;
}
.scroller {
    height: 100%;
    overflow-y: scroll;
}
.scroller::-webkit-scrollbar { 
    width: 0;
}
.scroller__bar {
    position: absolute;    
    z-index: 1;
    right: 0;
    width: 10px;
    background: #999;
}
.container { 
    overflow: hidden;
}

Inicializamos el plugin:

baron($('.wrapper'), {
    scroller: '.scroller',
    container: '.container',
    bar: '.scroller__bar'
});

Como comenté el soporte para los navegadores modernos es muy bueno, el proyecto tiene soporte completo para: Chrome, Firefox, Safari, Opera en Windows, OS X e iOS. Y para nuestra suerte, también soporte Internet Explorer en su versión 8, también funciona en su versión 7 salvo que tiene algunos problemas para fijar los encabezados, característica que no todo el mundo necesita.

En su apartado de Github pueden encontrar una demostración de funcionamiento 😀

Web: Baron.js

Categorizado en: