Scrolls personalizados con Jquery

Scrolls personalizados con JQuery

En muchas ocasiones necesitamos personalizar hasta el último detalle de los elementos que conforman las webs de nuestros proyectos, en este artículo os enseñamos como personalizar los scrolls tanto verticales como horizontales con JQuery para poder mostrarlos con el look & feel que queramos indistintamente del sistema operativo.



Los pasos para personalizar los scrolls con JQuery son bien sencillos, en ésta ocasión nos hemos decidido por Tiny Scrollbar, una pequeña librería JQuery con la que podemos crear los scrolls personalizados. Hay muchas otras librerías como ScrollPane, JQuery scroll Bar, JQuery Custom Content Scroller, Jquery Scrollbars Replacements, Scrollbar Paper, A Custom Scrollbar for a Div, Short Scroll, JQuery Scroll o  Vertical scrollbar using jQuery UI slider.

Pasos para conseguir personalizar el scroll tan solo tenemos que:

1 Descargar ejemplo

2 Incluir en el head de la página web la libreria de JQuery y Tiny Scrollbar

3 Rodearemos el contenido con el que queremos generar un scroll con el siguiente código 
<div id="scrollbar1">
    <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
    <div class="viewport">
        <div class="overview">
Contenido del scroll personalizado
        </div>
    </div>
</div>


4 Añadiremos estas reglas CSS a nuestros fichero de estilo para nuestro scroll personalizado, recomendable personalizar la altura y anchura para que se adapte a nuestras necesidades:
 
 /*CSS*/
#scrollbar1 { width: 520px; clear: both; margin: 20px 0 10px; }
#scrollbar1 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; }
#scrollbar1 .thumb .end,
#scrollbar1 .thumb { background-color: #003D5D; }
#scrollbar1 .scrollbar { position: relative; float: right; width: 15px; }
#scrollbar1 .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 1px; }
#scrollbar1 .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#scrollbar1 .disable{ display: none; }


5 Por último incluiremos una llamada a la librería Tiny Scroller en nuestro documento HTML para que convierta el elemento con el ID scrollbar1 en un scroll personalizado: 
<script type="text/javascript"><!--
    $(document).ready(function(){
                
        $('#scrollbar1').tinyscrollbar();
        
    });
// --></script>


El resultado que obtendréis será un slider como el que se muestra en la imagen:

http://baijs.nl/tinyscrollbar/
Solicitar información