jScrollPane

JScrollPane es un plugin de jQuery «cross-browser» creado por Kelvin Luck que convierte las barras de desplazamiento de un navegador por defecto (en elementos con una propiedad de desbordamiento relevante) en una estructura HTML que puede ser fácilmente modificada con CSS.


JScrollPane está diseñado para ser flexible y muy fácil de usar. Después de haber descargado e incluido los archivos relevantes en el encabezado del documento todo lo que necesita es llamar a una función javascript para inicializar el ScrollPane. Los estilos de las barras de desplazamiento resultantes se modifican fácilmente con CSS o se puede entre los temas existentes.

Para utilizarlo necesaritarás incluir los estilos necesarios, la librería jQuery, el plugin y la llamada al plugin en el <head> de la página:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
$(function() {
    $('.scroll-pane').jScrollPane({showArrows: true});
});
</script>

Y podemos añadir unos estilos específicos para el contenedor con scroll, como por ejemplo:

<style type="text/css" id="page-css">
/* Styles specific to this particular page */
.scroll-pane {
    width: 100%;
    height: 200px;
    overflow: auto;
    border:1px solid #CCCCCC;
    padding-left:5px;
}
</style>

Y luego en el <body> añadimos el contenedor con el scroll personalizado:

<div class="scroll-pane">
   <!-- YOUR TEXT OR CONTENT HTML -->
</div>

Ver infinidad de ejemplos y descarga

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(3 votos, promedio: 4 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre