Wie kann ich die Richtung eines jQuery Scroll-Ereignisses bestimmen?

Question

Ich bin auf der Suche nach etwas in dieser Richtung:

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

Irgendwelche Ideen?

Answer 1

Verwenden Sie dies, um die Bildlaufrichtung zu ermitteln. Dies dient nur dazu, die Richtung des vertikalen Bildlaufs zu bestimmen. Unterstützt alle Cross-Browser.

    var scrollableElement = document.getElementById('scrollableElement');

    scrollableElement.addEventListener('wheel', findScrollDirectionOtherBrowsers);

    function findScrollDirectionOtherBrowsers(event){
        var delta;

        if (event.wheelDelta){
            delta = event.wheelDelta;
        }else{
            delta = -1 * event.deltaY;
        }

        if (delta < 0){
            console.log("DOWN");
        }else if (delta > 0){
            console.log("UP");
        }

    }

Beispiel

Answer 2

Sie können die Richtung der Mauszeiger bestimmen.

$(window).on('mousewheel DOMMouseScroll', function (e) {
    var delta = e.originalEvent.wheelDelta ? 
                   e.originalEvent.wheelDelta : -e.originalEvent.detail;

    if (delta >= 0) {
        console.log('scroll up');
    } else {
        console.log('scroll down');
    }
});

Answer 3

Um jegliches Einrasten / Schwung / Rückprall am oberen und unteren Rand der Seite zu ignorieren, ist hier eine modifizierte Version von Die akzeptierte Antwort von Josiah :

var prevScrollTop = 0;
$(window).scroll(function(event){

    var scrollTop = $(this).scrollTop();

    if ( scrollTop < 0 ) {
        scrollTop = 0;
    }
    if ( scrollTop > $('body').height() - $(window).height() ) {
        scrollTop = $('body').height() - $(window).height();
    }

    if (scrollTop >= prevScrollTop && scrollTop) {
        // scrolling down
    } else {
        // scrolling up
    }

    prevScrollTop = scrollTop;
});

Answer 4

Ich habe viele Versionen von guten Antworten hier gesehen, aber es scheint, dass einige Leute browserübergreifende Probleme haben, also ist dies meine Lösung.

Ich habe dies erfolgreich verwendet, um Richtung in FF, IE und Chrome zu erkennen ... Ich habe es nicht in Safari getestet, da ich normalerweise Windows verwende.

$("html, body").bind({'mousewheel DOMMouseScroll onmousewheel touchmove scroll': 
    function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();

        //Determine Direction
        if (e.originalEvent.wheelDelta && e.originalEvent.wheelDelta >= 0) {
            //Up
            alert("up");

        } else if (e.originalEvent.detail && e.originalEvent.detail <= 0) {
            //Up
            alert("up");

        } else {
            //Down
            alert("down");
        }
    }
});

Beachten Sie, dass ich dies auch verwende, um jegliches Scrollen zu stoppen. Wenn Sie also möchten, dass das Scrollen weiterhin stattfindet, müssen Sie die e.preventDefault(); e.stopPropagation();

Answer 5

Halten Sie es super einfach:

jQuery Event Listener Way:

$(window).on('wheel', function(){
  whichDirection(event);
});

Vanilla JavaScript Event Listener Way:

if(window.addEventListener){
  addEventListener('wheel', whichDirection, false);
} else if (window.attachEvent) {
  attachEvent('wheel', whichDirection, false);
}

Die Funktion bleibt die gleiche:

function whichDirection(event){
  console.log(event + ' WheelEvent has all kinds of good stuff to work with');
  var scrollDirection = event.deltaY;
  if(scrollDirection === 1){
    console.log('meet me at the club, going down', scrollDirection);
  } else if(scrollDirection === -1) {
    console.log('Going up, on a tuesday', scrollDirection);
  }
}

Ich habe einen ausführlicheren Beitrag darüber geschrieben aquí