¿Cansado de hacer scroll? ¿harto de pulsar el cursor o la tecla AvPág para seguir viendo tu web favorita? Aquí en malnuer tenemos la solución! Un bookmarklet que te permitirá activar un scroll automático, ideal para todas esas webs donde los contenidos se van cargando a medida que bajas, como Twitter o Tumblr. Consíguelo ahora.

Bueno, ahora sin bromas. Este es un bookmarklet (es que me encantan) que sirve para poder hacer scroll automáticamente. Puede parecer una tontería, pero alguna vez me ha venido bien. Vamos a ver el código y luego comentamos:

window.setInterval( function(){ window.scroll(0,window.scrollY+5); }, 20);

Empezamos por lo más básico. Esa simple línea pone en marcha el scroll automático. Lo que hace es que cada 20 milisegundos (naranja), ejecuta una función (la azul) que detecta dónde está el scroll de la página y le suma 5. Así que se podría decir que ese «5» es la velocidad a la que se moverá el scroll.

El motivo de usar 20 milisegundos, es conseguir un scroll suave. Con ese valor tendremos un desplazamiento a 50hz (50 veces por segundo). Si queremos que vaya más o menos rápido, es mejor cambiar el mencionado valor de la velocidad en vez de cambiar esto, porque si no, podríamos hacer que aparezca algún tipo de parpadeo, saltitos o efectos feos.

Vale, ya sabemos ponerlo en marcha, ahora queremos pararlo. Para eso deberíamos haber guardado una referencia al Interval para poder hacerle un clearInterval() cuando nos interese. Esa referencia la guardaremos en una variable global (una propiedad del objeto window) y además podemos usarla para saber si el scroll está activo o no. La llamaremos window.autoScroll:

if(window.autoScroll){
  window.clearInterval(window.autoScroll);
  window.autoScroll = false;
}else{
  window.autoScroll = window.setInterval(
    function(){ window.scroll(0,window.scrollY+5); },
    20
  );
}

Al ejecutar el código, si ya existe y es distinto de false la variable global autoScroll, lo que hacemos es (líneas azules) usarla para eliminar el Interval y establecer su valor a false. Si se vuelve a ejecutar y el valor es false o no existe, establecemos el Interval (líneas naranja) y guardamos su referencia. Así tenemos un clásico on/off.

Con eso es suficiente. Vamos a encapsular todo en un closure y dejamos el valor de la velocidad como parámetro ajustable:

(function(velocidad){
  if(window.autoScroll){
    window.clearInterval(window.autoScroll);
    window.autoScroll = false;
  }else{
    window.autoScroll = window.setInterval(
      function(){ window.scroll(0,window.scrollY+velocidad); },
      20
    );
  }
})(5);

Simple y elegante. Si quieres más facilidades, puedes arrastrar el botón de debajo a tu barra de herramientas o favoritos.

Bookmarklet: [bookmarklet texto=»Autoscroll»]KGZ1bmN0aW9uKGEpe3dpbmRvdy5hdXRvU2Nyb2xsPyh3aW5kb3cuY2xlYXJJbnRlcnZhbCh3aW5kb3cuYXV0b1Njcm9sbCksd2luZG93LmF1dG9TY3JvbGw9ITEpOndpbmRvdy5hdXRvU2Nyb2xsPXdpbmRvdy5zZXRJbnRlcnZhbChmdW5jdGlvbigpe3dpbmRvdy5zY3JvbGwoMCx3aW5kb3cuc2Nyb2xsWSthKX0sMjApfSkoNSk7[/bookmarklet]

Recuerda que si quieres, puedes hacer cambios en el código, y después minificarlo con la herramienta de Google Closure Compiler, que es la que yo uso.

Puedes ver mis otros Bookmarklets y su explicación, aquí en malnuer a través de la etiqueta Bookmarklet o bien ir a mi página de Github donde también están todos.

Gracias por leerme y si quieres déjame algún comentario o sugerencia.

Compártelo...