¿Necesitas incluir barras de scroll a una o más capas dentro de tu página? En este post encontraréis una posible solución utilizando un plugin jQuery llamado jScrollPane.
En ocasiones llenamos nuestras páginas de de mucho contenido dentro de uno o varios divs. Más tarde nos damos cuenta de que el área reservada en un div para mostrar ciertos elementos o texto se ha quedado pequeño, y al crecer la página la página deja de verse correctamente. Tanto si este es tu problema como si únicamente quieres incluir scroll a una capa este plugin de jQuery te ayudará.
Lo primero que debemos hacer es descargarlo desde http://jscrollpane.kelvinluck.com/#download, necesitaremos lo siguiente:
- jquery.jscrollpane.css. Estilos básicos CSS necesarios para hacerlo funcionar
- jquery.jscrollpane.min.js. Es la versión reducida del fichero javascript de jScrollPane. Podemos usar el fichero sin minimizar, de manera que nos permita ver el código y los comentarios sobre el mismo.
- Obviamente, la librería jQuery.
- jquery.mousewheel.js. Opcional. Es el plugin mousewheel, para hacer scroll con la rueda que incorporan la mayoría de los ratones.
- mwheelIntent.js. Opcional. Es el plugin mWheelIntent para mejorar la usabilidad usando la rueda del ratón.
El uso es muy sencillo, después de descargar los ficheros necesarios los incluimos en el head de nuestro código html:
<!-- estilos jScrollPane --> <link type="text/css" href="jquery.jscrollpane.css" rel="stylesheet"/> <!-- versión de jQuery --> <script type="text/javascript" src="jquery.min.js"></script> <!-- El plugin mousewheel plugin - opcional - provee soporte para la rueda del ratón --> <script type="text/javascript" src="jquery.mousewheel.js"></script> <!-- Fichero javascript de jScrollPane --> <script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
Ahora tenemos que inicializar jScrollPane al cargar la página de la forma:
<script type="text/javascript">
$(document).ready(function($){
var pane = $("#cajafechas")
pane.jScrollPane();
var api = pane.data('jsp');
api.scrollToBottom();
});
</script>
En el ejemplo tenemos una capa con el id cajafechas, a la que aplicamos el plugin. Esta capa se va completando con fechas de forma dinámica, cuando el número de fechas sea muy grande, aparecerán las barras de scroll. Bastaría con poner la línea $("#cajafechas").jScrollPane();, pero necesitamos que al iniciar la página el scroll se desplace al final. Para ello llamamos a un método del API, scrollToBottom().
Hay muchas formas de usar jScrollPane (animaciones, estilos de barra, etc), bien a través de parámetros de configuración o bien a través del API. En la página del desarrollador se pueden encontrar multitud de ejemplos.