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>
Deja una respuesta