Modificación del scroll HTML

En determinadas ocasiones nos veremos en la necesidad de modificar estéticamente el scroll que por defecto nos presentan los navegadores cuando incluimos uno en nuestro código HTML/CSS. Existen diversas maneras de hacer esto y muchos scripts para ello, pero personalmente, tras probar varios he dado con uno que me parece muy versátil y fácil de utilizar y quería compartirlo con vosotros. Se trata de ypSimpleScroll


Aquí tenéis el código fuente original: http://www.youngpup.net/projects/ypSimpleScroll/

Pero he de decir que existe una modificación de este script de Aaron Boodman que para mi gusto lo mejora aún más y lo hace compatible con todos los navegadores (que yo haya testeado) y con mac. En el siguiente blog está el script modificado así como una detallada explicación de su uso: http://meddle.dzygn.com/esp/weblog/modificacion.scroller/

Básicamente. Tras descargar los archivos de la web de Boodman:
http://meddle.dzygn.com/v3/js/_aaron_scroller_mtv.rar

  1. Enlazas a los estilos css (totalmente personalizables).
    <link rel=”stylesheet” type=”text/css” href=”scroller.css”>
  2. Enlazas a los 3 archivos Javascript que hay que descargar.
    <script type=”text/javascript” src=”dom-drag.js”></script>
    <script type=”text/javascript” src=”ypSimpleScrollC.js”></script>
    <script type=”text/javascript” src=”scroller.js”></script>
  3. Inicias el script con la llamada a la función JS.
    <script type="text/javascript">
    instantiateScroller(0, "scroll0", 7, 0, 300, 150, 150);
    </script>

Muy útil, de verdad.

Si conocéis algún otro no dudéis en postearlo.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s