SummArg | Cursos y recursos para webmasters

06/01/2011

Scroller de contenido con soporte para la rueda del mouse

En esta oportunidad reseñamos un plugin jQuery para insertar un efecto de desplazamiento (scroll) para contenidos que soporta utilizar la rueda del mouse. Funciona perfectamente con múltiples secciones para desplazar e incluso se puede colocar una pequeña adaptación para el caso de que el usuario tenga desactivado el uso de javascript.


Demo | Descarga

¿Cómo utilizar el script?

Se deben descargar los archivos de la web del autor del plugin y linkearlos desde la sección <head>. El plugin mousewheel.min.js permite la funcionalidad de la rueda del mouse y mCustomScrollbar.css otorga estilo a las scrollbars.

<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="jquery.mousewheel.min.js" type="text/javascript"></script>

El marcado HTML para el bloque de texto puede ser de la siguiente forma:

<div id="mcs_container">
<div class="customScrollBox">
<div class="container">
<div class="content">
Contenido realmente largo...</p>
</div>
</div>
<div class="dragger_container">
<div class="dragger"></div>
</div>
</div>
</div>

El primer div (mcs_container) debe tener un ID único, el resto debe ubicarse como en el ejemplo. Antes de la etiqueta de cierre </body> colocaremos las instrucciones para el contenido de este div.

<script>
$(window).load(function() {
$("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes");
});
</script>
<script src="jquery.mCustomScrollbar.js" type="text/javascript"></script>

Las opciones del script son:

  • Dirección del deslizamiento (“vertical” u “horizontal”)
  • Valor para el efecto easing (ej. 400 para un efecto mas suavizado o cero – 0 – para ningún efecto de animación)
  • Tipo de animación easing
  • Espacio inferior extra (aplica solo a deslizamiento vertical)
  • Ajuste de la scrollbar en alto y ancho.
  • Soporte para la rueda del mouse (“yes” o “no”)

Esperamos les sea de utilidad!

Dejar un comentario

  1. Mil Gracias maestro, me viene al pelo este plugin!!

Dejar un comentario