Możesz to zrobić bez konieczności śledzenia poprzedniego przewijania góry, ponieważ wszystkie inne przykłady wymagają:

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

Nie jestem ekspertem w tej dziedzinie, więc nie krępuj się badać go dalej, ale wydaje się, że kiedy używasz $(element).scroll, słuchane wydarzenie jest wydarzeniem "zwojowym".

Ale jeśli specjalnie nasłuchujesz zdarzenia mousewheel za pomocą bind, atrybut originalEvent parametru event do wywołania zwrotnego zawiera różne informacje. Część tych informacji to wheelDelta. Jeśli to tak, przesunąłeś koło myszy. Jeśli jest negatywny, przesunąłeś koło myszy w dół.

Domyślam się, że mousewheel zdarzenia będą uruchamiane po obróceniu kółka myszy, nawet jeśli strona nie przewija się; przypadek, w którym zdarzenia "przewijania" prawdopodobnie nie zostaną wywołane. Jeśli chcesz, możesz wywołać event.preventDefault() u dołu wywołania zwrotnego, aby zapobiec przewijaniu strony i aby można było użyć zdarzenia koła myszy do czegoś innego niż przewijanie strony, na przykład do funkcji powiększania.

Zapisz poprzednią lokalizację przewijania, a następnie sprawdź, czy nowa jest większa lub mniejsza od tej.

Oto sposób na uniknięcie zmiennych globalnych (tutaj):

(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

Istniejące Rozwiązanie

Może być 3 rozwiązanie z tego postu i inna odpowiedź.

rozwiązanie 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;
    });

Rozwiązanie 2

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

Rozwiązanie 3

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

Test Multi Browser

Nie mogłem tego przetestować na Safari

Chrome 42 (Win 7)

• rozwiązanie 1
  • do góry : 1 Zdarzenie na 1 zwój
  • Down: 1 event per 1 scroll
• Soltion 2
  • W Górę: nie działa
  • dół: nie działa
• Rozwiązanie 3
  • do góry : 1 Zdarzenie na 1 zwój
  • W Dół: 1 Zdarzenie na 1 zwój

Firefox 37 (Win 7)

• rozwiązanie 1
  • do góry : 20 zdarzeń na 1 zwój
  • dół: 20 zdarzeń na 1 zwój
• Soltion 2
  • W Górę: nie działa
  • Down: 1 event per 1 scroll
• Rozwiązanie 3
  • W Górę: nie działa
  • dół: nie działa

IE 11 (Win 8)

• rozwiązanie 1
  • W górę: 10 zdarzeń na 1 przewijanie (efekt uboczny : w końcu nastąpiło przewijanie w dół)
  • dół: 10 zdarzeń na 1 zwój
• Soltion 2
  • W Górę: nie działa
  • dół: nie działa
• Rozwiązanie 3
  • W Górę: nie działa
  • dół : 1 event per 1 scroll

IE 10 (Win 7)

• rozwiązanie 1
  • do góry : 1 Zdarzenie na 1 zwój
  • W Dół: 1 Zdarzenie na 1 zwój
• Soltion 2
  • W Górę: nie działa
  • dół: nie działa
• Rozwiązanie 3
  • do góry : 1 Zdarzenie na 1 zwój
  • W Dół: 1 Zdarzenie na 1 zwój

IE 9 (Win 7)

• rozwiązanie 1
  • up : 1 event per 1 scroll
  • W Dół: 1 Zdarzenie na 1 zwój
• Soltion 2
  • W Górę: nie działa
  • dół: nie działa
• Rozwiązanie 3
  • do góry : 1 Zdarzenie na 1 zwój
  • W Dół: 1 Zdarzenie na 1 zwój

IE 8 (Win 7)

• rozwiązanie 1
  • W Górę: 2 zdarzenia na 1 przewijanie (efekt uboczny : w końcu nastąpiło przewijanie w dół)
  • dół: 2~4 zdarzenia na 1 scroll
• Soltion 2
  • W Górę: nie działa
  • dół: nie działa
• Rozwiązanie 3
  • do góry : 1 Zdarzenie na 1 zwój
  • W Dół: 1 Zdarzenie na 1 zwój

Roztwór Kombinowany

Sprawdziłem, że efekt uboczny z IE 11 i IE 8 pochodzi z if else. Więc zastąpiłem go if else if oświadczeniem w następujący sposób.

Z testu multi browser postanowiłem użyć Rozwiązanie 3 dla popularnych przeglądarek i rozwiązanie 1 dla Firefoksa i IE 11.

Skierowałem tę odpowiedź do wykrycia 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');
            }
        });
    }

Rozumiem, że została już zaakceptowana odpowiedź, ale chciałem opublikować to, czego używam, na wypadek, gdyby mogło to komuś pomóc. Dostaję kierunek jak cliphex z eventem mousewheel, ale z obsługą Firefoksa. Jest to przydatne w ten sposób, jeśli robisz coś takiego jak blokowanie przewijania i nie możesz uzyskać bieżącego przewijania góry.

Zobacz wersję live tutaj .

$(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
    }
});

Scroll Event

The scroll event dziwnie zachowuje się w FF (jest odpalany wiele razy ze względu na płynność przewijania) ale działa.

Uwaga: Zdarzenie scroll w rzeczywistości jest wywoływane podczas przeciągania paska przewijania za pomocą klawiszy kursora lub kółka myszy.

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "35px"
});

//binds the "scroll" event
$(window).scroll(function (e) {
    var target = e.currentTarget,
        self = $(target),
        scrollTop = window.pageYOffset || target.scrollTop,
        lastScrollTop = self.data("lastScrollTop") || 0,
        scrollHeight = target.scrollHeight || document.body.scrollHeight,
        scrollText = "";

    if (scrollTop > lastScrollTop) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    $("#test").html(scrollText +
      "<br>innerHeight: " + self.innerHeight() +
      "<br>scrollHeight: " + scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>lastScrollTop: " + lastScrollTop);

    if (scrollHeight - scrollTop === self.innerHeight()) {
      console.log("► End of scroll");
    }

    //saves the current scrollTop
    self.data("lastScrollTop", scrollTop);
});

Zdarzenie Koła

Możesz również spojrzeć na MDN, ujawnia świetne informacje na temat koło Event .

Uwaga: Zdarzenie wheel jest wywoływane tylko przy użyciu kółka myszy; klawisze kursora i przeciąganie paska przewijania nie wywołują zdarzenia.

Czytam dokument i przykład: słuchanie tego wydarzenia przez przeglądarkę
a po kilku testach z FF, IE, chrome, safari skończyło się na tym fragmencie:

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "15px"
});

//attach the "wheel" event if it is supported, otherwise "mousewheel" event is used
$("html").on(("onwheel" in document.createElement("div") ? "wheel" : "mousewheel"), function (e) {
    var evt = e.originalEvent || e;

    //this is what really matters
    var deltaY = evt.deltaY || (-1 / 40 * evt.wheelDelta), //wheel || mousewheel
        scrollTop = $(this).scrollTop() || $("body").scrollTop(), //fix safari
        scrollText = "";

    if (deltaY > 0) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    //console.log("Event: ", evt);
    $("#test").html(scrollText +
      "<br>clientHeight: " + this.clientHeight +
      "<br>scrollHeight: " + this.scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>deltaY: " + deltaY);
});

Jeśli chcesz wiedzieć, czy przewijasz w górę lub w dół za pomocą urządzenia wskazującego (myszy lub podkładki), możesz użyć właściwości deltaY zdarzenia wheel.

$('.container').on('wheel', function(event) {
  if (event.originalEvent.deltaY > 0) {
    $('.result').append('Scrolled down!<br>');
  } else {
    $('.result').append('Scrolled up!<br>');
  }
});

.container {
  height: 200px;
  width: 400px;
  margin: 20px;
  border: 1px solid black;
  overflow-y: auto;
}
.content {
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="content">
    Scroll me!
  </div>
</div>

<div class="result">
  <p>Action:</p>
</div>

var tempScrollTop, currentScrollTop = 0; 

$(window).scroll(function(){ 

   currentScrollTop = $("#div").scrollTop(); 

   if (tempScrollTop > currentScrollTop ) {
       // upscroll code
   }
  else if (tempScrollTop < currentScrollTop ){
      // downscroll code
  }

  tempScrollTop = currentScrollTop; 
} 

Lub użyj rozszerzenia mousewheel , Zobacz tutaj .

Aby zignorować wszelkie pstryknięcia / momenty / odbicia u góry i u dołu strony, oto zmodyfikowana wersja zaakceptowanej odpowiedzi :

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

Możesz określić kierunek myszy.

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

Widziałem wiele wersji dobrych odpowiedzi tutaj, ale wydaje się, że niektórzy ludzie mają problemy z przeglądarką, więc jest to moja poprawka.

Użyłem tego z powodzeniem do wykrywania kierunku w FF, IE i Chrome ... Nie testowałem go w safari, ponieważ zazwyczaj używam systemu windows.

$("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");
        }
    }
});

Pamiętaj, że używam tego również, aby zatrzymać przewijanie, więc jeśli chcesz przewijanie nadal występuje, musisz usunąć e.preventDefault(); e.stopPropagation();

Użyj tego, aby znaleźć kierunek przewijania. To tylko po to, aby znaleźć kierunek pionowego przewijania. Obsługuje wszystkie przeglądarki krzyżowe.

    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");
        }

    }

Przykład

Zapisz przyrost w .data () elementu przewijanego, a następnie będziesz mógł przetestować liczbę razy przewijania osiągniętą na górze.

Keep it super simple:

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

Funkcja Pozostaje Taka Sama:

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

Napisalem bardziej niezalezny post na ten temat tutaj ​​​​​​​

Możesz użyć opcji przewijania i kółka myszy, aby śledzić ruch w górę iw dół jednocześnie.

 $('body').bind('scroll mousewheel', function(event) {

if (event.originalEvent.wheelDelta >= 0) {
      console.log('moving down');   
    }
    else {
      console.log('moving up'); 
    }
});

Możesz również zastąpić 'body' przez (window).

Ten kod działa dobrze z IE, Firefox, Opera i Chrome:

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

'wheel mousewheel' oraz właściwość deltaY muszą być użyte w funkcji bind () .

Pamiętaj: użytkownik musi zaktualizować swój system i przeglądarki ze względów bezpieczeństwa. W 2018 roku wymówki "mam IE 7" są nonsensem. Musimy edukować użytkowników.

Miłego dnia:)

Dla tych, którzy mają problemy z elastycznym przewijaniem, skorzystaj z tej odpowiedzi

Jak wykryć kierunek przewijania

W .data() elementu można zapisać JSON i wartości testowe, aby uruchomić zdarzenia

{ top : 1,
   first_top_event: function(){ ...},
   second_top_event: function(){ ...},
   third_top_event: function(){ ...},
   scroll_down_event1: function(){ ...},
   scroll_down_event2: function(){ ...}
}

Jest to proste i łatwe wykrywanie, gdy użytkownik przewija się od góry strony i kiedy wraca do góry.

$(window).scroll(function() {
    if($(window).scrollTop() > 0) {
        // User has scrolled
    } else {
        // User at top of page
    }
});

Jest to optymalne rozwiązanie do wykrywania kierunku tuż po zakończeniu przewijania przez użytkownika.

var currentScrollTop = 0 ;

$(window).bind('scroll', function () {     

    scrollTop = $(this).scrollTop();

    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {

        if(scrollTop > currentScrollTop){
            // downscroll code
            $('.mfb-component--bl').addClass('mfbHide');
        }else{
            // upscroll code
            $('.mfb-component--bl').removeClass('mfbHide');
        }
        currentScrollTop = scrollTop;

    }, 250));

});

Powinieneś spróbować tego

var scrl
$(window).scroll(function(){
        if($(window).scrollTop() < scrl){
            //some code while previous scroll
        }else{
            if($(window).scrollTop() > 200){
                //scroll while downward
            }else{//scroll while downward after some specific height
            }
        }
        scrl = $(window).scrollTop();
    });

Dlaczego nikt nie używa event obiektu zwróconego przez jQuery na scrollu ?

$window.on('scroll', function (event) {
    console.group('Scroll');
    console.info('Scroll event:', event);
    console.info('Position:', this.pageYOffset);
    console.info('Direction:', event.originalEvent.dir); // Here is the direction
    console.groupEnd();
});

Używam chromium i nie sprawdzałem na innych przeglądarkach, czy mają właściwość dir.