¿Cómo puedo determinar la dirección de un evento de desplazamiento de jQuery?

Estoy buscando algo en este sentido:

$(window).scroll(function(event){
   if (/* magic code*/ ){
       // upscroll code
   } else {
      // downscroll code
   }
});

¿Algunas ideas?

Dec 01 '10 23:12 Zach

Puede hacerlo sin tener que realizar un seguimiento de la parte superior de desplazamiento anterior, como lo requieren todos los demás ejemplos:

$(window).bind('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
        console.log('Scroll up');
    }
    else {
        console.log('Scroll down');
    }
});

No soy un experto en esto, así que siéntete libre de investigarlo más a fondo, pero parece que cuando usas $(element).scroll, el evento que se escucha es un evento de "desplazamiento".

Pero si escucha específicamente un mousewheelevento mediante vinculación, el originalEventatributo del parámetro de evento de su devolución de llamada contiene información diferente. Parte de esa información es wheelDelta. Si es positivo, moviste la rueda del mouse hacia arriba. Si es negativo, moviste la rueda del mouse hacia abajo.

Supongo que mousewheellos eventos se activarán cuando gire la rueda del mouse, incluso si la página no se desplaza; un caso en el que los eventos de 'desplazamiento' probablemente no se activen. Si lo desea, puede llamar event.preventDefault()en la parte inferior de su devolución de llamada para evitar que la página se desplace y para poder usar el evento de la rueda del mouse para algo más que desplazarse por la página, como algún tipo de funcionalidad de zoom.

May 11 '2012 04:05 cilphex

Solución existente

Podría haber 3 soluciones a partir de esta publicación y otra respuesta .

Solución 1

    var lastScrollTop = 0;
    $(window).on('scroll', function() {
        st = $(this).scrollTop();
        if(st < lastScrollTop) {
            console.log('up 1');
        }
        else {
            console.log('down 1');
        }
        lastScrollTop = st;
    });

Solución 2

    $('body').on('DOMMouseScroll', function(e){
        if(e.originalEvent.detail < 0) {
            console.log('up 2');
        }
        else {
            console.log('down 2');
        }
    });

Solución 3

    $('body').on('mousewheel', function(e){
        if(e.originalEvent.wheelDelta > 0) {
            console.log('up 3');
        }
        else {
            console.log('down 3');
        }
    });

Prueba de navegador múltiple

No pude probarlo en Safari.

cromo 42 (Win 7)

• Solución 1
  • Arriba: 1 evento por 1 desplazamiento
  • Abajo: 1 evento por 1 desplazamiento
• Solución 2
  • Arriba: No funciona
  • Abajo: No funciona
• Solución 3
  • Arriba: 1 evento por 1 desplazamiento
  • Abajo: 1 evento por 1 desplazamiento

Firefox 37 (Ganar 7)

• Solución 1
  • Arriba: 20 eventos por 1 desplazamiento
  • Abajo: 20 eventos por 1 desplazamiento
• Solución 2
  • Arriba: No funciona
  • Abajo: 1 evento por 1 desplazamiento
• Solución 3
  • Arriba: No funciona
  • Abajo: No funciona

IE 11 (Ganar 8)

• Solución 1
  • Arriba: 10 eventos por 1 desplazamiento (efecto secundario: el desplazamiento hacia abajo ocurrió por fin)
  • Abajo: 10 eventos por 1 desplazamiento
• Solución 2
  • Arriba: No funciona
  • Abajo: No funciona
• Solución 3
  • Arriba: No funciona
  • Abajo: 1 evento por 1 desplazamiento

Es decir, 10 (Ganar 7)

• Solución 1
  • Arriba: 1 evento por 1 desplazamiento
  • Abajo: 1 evento por 1 desplazamiento
• Solución 2
  • Arriba: No funciona
  • Abajo: No funciona
• Solución 3
  • Arriba: 1 evento por 1 desplazamiento
  • Abajo: 1 evento por 1 desplazamiento

IE 9 (Ganar 7)

• Solución 1
  • Arriba: 1 evento por 1 desplazamiento
  • Abajo: 1 evento por 1 desplazamiento
• Solución 2
  • Arriba: No funciona
  • Abajo: No funciona
• Solución 3
  • Arriba: 1 evento por 1 desplazamiento
  • Abajo: 1 evento por 1 desplazamiento

IE 8 (Ganar 7)

• Solución 1
  • Arriba: 2 eventos por 1 desplazamiento (efecto secundario: el desplazamiento hacia abajo ocurrió por fin)
  • Abajo: 2~4 eventos por 1 desplazamiento
• Solución 2
  • Arriba: No funciona
  • Abajo: No funciona
• Solución 3
  • Arriba: 1 evento por 1 desplazamiento
  • Abajo: 1 evento por 1 desplazamiento

Solución combinada

Verifiqué que el efecto secundario de IE 11 e IE 8 proviene de if elsela declaración. Entonces, lo reemplacé con if else ifla siguiente declaración.

De la prueba de múltiples navegadores, decidí usar la Solución 3 para navegadores comunes y la Solución 1 para Firefox e IE 11.

Remití esta respuesta para detectar IE 11.

    // Detect IE version
    var iev=0;
    var ieold = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
    var trident = !!navigator.userAgent.match(/Trident\/7.0/);
    var rv=navigator.userAgent.indexOf("rv:11.0");

    if (ieold) iev=new Number(RegExp.$1);
    if (navigator.appVersion.indexOf("MSIE 10") != -1) iev=10;
    if (trident&&rv!=-1) iev=11;

    // Firefox or IE 11
    if(typeof InstallTrigger !== 'undefined' || iev == 11) {
        var lastScrollTop = 0;
        $(window).on('scroll', function() {
            st = $(this).scrollTop();
            if(st < lastScrollTop) {
                console.log('Up');
            }
            else if(st > lastScrollTop) {
                console.log('Down');
            }
            lastScrollTop = st;
        });
    }
    // Other browsers
    else {
        $('body').on('mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0) {
                console.log('Up');
            }
            else if(e.originalEvent.wheelDelta < 0) {
                console.log('Down');
            }
        });
    }

Apr 18 '2015 17:04 Chemical Programmer