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

Strom prüfen scrollTop gegenüber früher scrollTop

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});

Answer 2

Sie können dies tun, ohne dass Sie den vorherigen Bildlauf oben verfolgen müssen, wie es bei allen anderen Beispielen erforderlich ist:

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

Ich bin kein Experte auf diesem Gebiet, Sie können also gerne weiter recherchieren, aber es scheint, dass Sie bei der Verwendung von $(element).scroll ist das Ereignis, auf das gewartet wird, ein "Scroll"-Ereignis.

Aber wenn Sie gezielt nach einer mousewheel Ereignis mit Hilfe von bind, dem originalEvent Attribut des Ereignisparameters Ihres Rückrufs andere Informationen enthält. Ein Teil dieser Informationen ist wheelDelta . Wenn er positiv ist, haben Sie das Mausrad nach oben bewegt. Wenn er negativ ist, haben Sie das Mausrad nach unten bewegt.

Meine Vermutung ist, dass mousewheel Ereignisse werden ausgelöst, wenn sich das Mausrad dreht, auch wenn die Seite nicht gescrollt wird; ein Fall, in dem "Scroll"-Ereignisse wahrscheinlich nicht ausgelöst werden. Wenn Sie wollen, können Sie event.preventDefault() am Ende des Rückrufs, um zu verhindern, dass die Seite gescrollt wird, und damit Sie das Mausrad-Ereignis für etwas anderes als das Scrollen der Seite verwenden können, z. B. für eine Art Zoom-Funktion.

Answer 3

Speichern Sie die vorherige Bildlaufposition und prüfen Sie dann, ob die neue Position größer oder kleiner als diese ist.

Hier ist eine Möglichkeit, globale Variablen zu vermeiden ( Fiedel hier erhältlich ):

(function () {
    var previousScroll = 0;

    $(window).scroll(function(){
       var currentScroll = $(this).scrollTop();
       if (currentScroll > previousScroll){
           alert('down');
       } else {
          alert('up');
       }
       previousScroll = currentScroll;
    });
}()); //run this anonymous function immediately

Answer 4

Bestehende Lösung

Es könnten sein 3 Lösung aus diesem Beitrag und andere Antwort .

Lösung 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;
    });

Lösung 2

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

Lösung 3

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

---

Multi-Browser-Test

Ich konnte es nicht mit Safari testen

Chrom 42 (Win 7)

• Lösung 1
  • Auf : 1 Ereignis pro 1 Schriftrolle
  • Abwärts : 1 Ereignis pro 1 Bildlauf
• Lösung 2
  • Auf : Funktioniert nicht
  • Unten : Funktioniert nicht
• Lösung 3
  • Auf : 1 Ereignis pro 1 Schriftrolle
  • Abwärts : 1 Ereignis pro 1 Bildlauf

Firefox 37 (Win 7)

• Lösung 1
  • Up : 20 Ereignisse pro 1 Bildlauf
  • Abwärts : 20 Ereignisse pro 1 Bildlauf
• Lösung 2
  • oben: Funktioniert nicht
  • Abwärts : 1 Ereignis pro 1 Bildlauf
• Lösung 3
  • Auf : Funktioniert nicht
  • Unten : Funktioniert nicht

IE 11 (Win 8)

• Lösung 1
  • Auf : 10 Ereignisse pro 1 Bildlauf (Nebeneffekt: Zuletzt wurde nach unten geblättert)
  • Abwärts : 10 Ereignisse pro 1 Bildlauf
• Lösung 2
  • Auf : Funktioniert nicht
  • Unten : Funktioniert nicht
• Lösung 3
  • Auf : Funktioniert nicht
  • Abwärts : 1 Ereignis pro 1 Bildlauf

IE 10 (Win 7)

• Lösung 1
  • Auf : 1 Ereignis pro 1 Schriftrolle
  • Abwärts : 1 Ereignis pro 1 Bildlauf
• Lösung 2
  • oben: Funktioniert nicht
  • Unten : Funktioniert nicht
• Lösung 3
  • Auf : 1 Ereignis pro 1 Schriftrolle
  • Abwärts : 1 Ereignis pro 1 Bildlauf

IE 9 (Win 7)

• Lösung 1
  • Auf : 1 Ereignis pro 1 Schriftrolle
  • Abwärts : 1 Ereignis pro 1 Bildlauf
• Lösung 2
  • Auf : Funktioniert nicht
  • Unten : Funktioniert nicht
• Lösung 3
  • Auf : 1 Ereignis pro 1 Schriftrolle
  • Abwärts : 1 Ereignis pro 1 Bildlauf

IE 8 (Win 7)

• Lösung 1
  • Oben: 2 Ereignisse pro 1 Bildlauf (Nebeneffekt: zuletzt wurde nach unten gescrollt)
  • Abwärts: 2~4 Ereignisse pro 1 Bildlauf
• Lösung 2
  • Auf : Funktioniert nicht
  • Unten : Funktioniert nicht
• Lösung 3
  • Auf : 1 Ereignis pro 1 Schriftrolle
  • Abwärts : 1 Ereignis pro 1 Bildlauf

---

Kombinierte Lösung

Ich habe überprüft, dass der Nebeneffekt von IE 11 und IE 8 kommt von if else Erklärung. Also habe ich sie ersetzt durch if else if Erklärung wie folgt.

Nach dem Multi-Browser-Test entschied ich mich für die Verwendung von Lösung 3 für gängige Browser und Lösung 1 für Firefox und IE 11.

Ich habe diese Antwort um den IE 11 zu erkennen.

    // 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');
            }
        });
    }

Answer 5

Ich weiß, dass es bereits eine akzeptierte Antwort gegeben hat, aber ich wollte posten, was ich benutze, falls es jemandem helfen kann. Ich bekomme die Richtung wie cliphex mit dem Mausrad-Ereignis, aber mit Unterstützung für Firefox. Es ist nützlich, es auf diese Weise zu tun, für den Fall, dass Sie etwas wie Locking Scroll tun und kann nicht die aktuelle Scroll oben zu bekommen.

Sehen Sie eine Live-Version aquí .

$(window).on('mousewheel DOMMouseScroll', function (e) {

    var direction = (function () {

        var delta = (e.type === 'DOMMouseScroll' ?
                     e.originalEvent.detail * -40 :
                     e.originalEvent.wheelDelta);

        return delta > 0 ? 0 : 1;
    }());

    if(direction === 1) {
       // scroll down
    }
    if(direction === 0) {
       // scroll up
    }
});