domingo, 27 de mayo de 2012

Slow scroll, javascript global


  • Normalmente el scroll con la rueda del mouse se siente algo rápido y brusco (en mi caso 140px por paso).
    Para lograr un paso más suave, puede ser de ayuda el plugin Mousewheel de Brandon Aaron, que provee el evento mousewheel. Por ejemplo:
    ...
    global.top = $(window).scrollTop(); // toma nota del desplazamiento
    global.deltaFactor = 4;
    
    $(window).mousewheel(function(e, delta) {
      e.preventDefault(); // previene desplazamiento normal
    
      var top = global.top;
    
      // calcular desplamiento
      top -= delta * global.deltaFactor; // delta puede ser -1 o 1
      if (top < 0) {
        top = 0;
      } else if (top > global.maxtop) {
        top = global.maxtop;
      }
      
      $(window).scrollTop(top); // desplaza
    
      global.top = top;
    });
    ...
    
    Un deltaFactor = 140 reproduciría el comportamiento normal. deltaFactor = 4 produce un paso mucho más suave.
    Sería interesante dotar a esto de aceleración, como en el iphone.
  • Una forma conveniente de usar variables globales en javascript es usar un objeto global y colocar cada variable como una propiedad de global:
    var global = {};
    global.x = 123;