Sto cercando qualcosa in tal senso:

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

Qualche idea?

Controlla attuale scrollTopvs precedentescrollTop

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

Puoi farlo senza dover tenere traccia della precedente barra di scorrimento, poiché tutti gli altri esempi richiedono:

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

Non sono un esperto di questo, quindi sentitevi liberi di approfondire la ricerca, ma sembra che quando si utilizza $(element).scroll, l'evento ascoltato è un evento 'scroll'.

Ma se si ascolta specificamente un mousewheelevento utilizzando bind, l' originalEventattributo del parametro dell'evento al callback contiene informazioni diverse. Parte di tali informazioni è wheelDelta. Se è positivo, hai spostato la rotellina del mouse verso l'alto. Se è negativo, hai spostato la rotellina del mouse verso il basso.

La mia ipotesi è che gli mousewheeleventi verranno attivati ​​quando la rotellina del mouse gira, anche se la pagina non scorre; un caso in cui gli eventi 'scroll' probabilmente non vengono attivati. Se lo desideri, puoi chiamare event.preventDefault()nella parte inferiore del callback per impedire lo scorrimento della pagina e in modo da poter utilizzare l'evento rotellina del mouse per qualcosa di diverso da uno scorrimento della pagina, come un tipo di funzionalità di zoom.

Memorizza la posizione di scorrimento precedente, quindi verifica se quella nuova è maggiore o minore di quella.

Ecco un modo per evitare qualsiasi variabile globale ( violino disponibile qui ):

(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

Soluzione esistente

Ci potrebbero essere 3 soluzioni da questo post e altre risposte .

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

Soluzione 2

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

Soluzione 3

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

Test multi browser

Non ho potuto testarlo su Safari

chrome 42 (Win 7)

• Soluzione 1
  • Su: 1 evento per 1 scorrimento
  • Giù: 1 evento per 1 scorrimento
• Soltion 2
  • Su: non funziona
  • Giù: non funziona
• Soluzione 3
  • Su: 1 evento per 1 scorrimento
  • Giù: 1 evento per 1 scorrimento

Firefox 37 (Win 7)

• Soluzione 1
  • Su: 20 eventi per 1 scorrimento
  • Giù: 20 eventi per 1 scorrimento
• Soltion 2
  • Su: non funziona
  • Giù: 1 evento per 1 scorrimento
• Soluzione 3
  • Su: non funziona
  • Giù: non funziona

IE 11 (Win 8)

• Soluzione 1
  • Su: 10 eventi per 1 scorrimento (effetto collaterale: si è verificato infine uno scorrimento in basso)
  • Giù: 10 eventi per 1 scorrimento
• Soltion 2
  • Su: non funziona
  • Giù: non funziona
• Soluzione 3
  • Su: non funziona
  • Giù: 1 evento per 1 scorrimento

IE 10 (Win 7)

• Soluzione 1
  • Su: 1 evento per 1 scorrimento
  • Giù: 1 evento per 1 scorrimento
• Soltion 2
  • Su: non funziona
  • Giù: non funziona
• Soluzione 3
  • Su: 1 evento per 1 scorrimento
  • Giù: 1 evento per 1 scorrimento

IE 9 (Win 7)

• Soluzione 1
  • Su: 1 evento per 1 scorrimento
  • Giù: 1 evento per 1 scorrimento
• Soltion 2
  • Su: non funziona
  • Giù: non funziona
• Soluzione 3
  • Su: 1 evento per 1 scorrimento
  • Giù: 1 evento per 1 scorrimento

IE 8 (Win 7)

• Soluzione 1
  • Su: 2 eventi per 1 scorrimento (effetto collaterale: si è verificato infine uno scorrimento verso il basso)
  • Giù: 2 ~ 4 eventi per 1 scorrimento
• Soltion 2
  • Su: non funziona
  • Giù: non funziona
• Soluzione 3
  • Su: 1 evento per 1 scorrimento
  • Giù: 1 evento per 1 scorrimento

Soluzione combinata

Ho verificato che l'effetto collaterale di IE 11 e IE 8 provenga if elsedall'affermazione. Quindi, l'ho sostituito con una if else ifdichiarazione come segue.

Dal test multi-browser, ho deciso di utilizzare la soluzione 3 per i browser comuni e la soluzione 1 per firefox e IE 11.

Ho inviato questa risposta per rilevare 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');
            }
        });
    }

Capisco che c'è già stata una risposta accettata, ma volevo pubblicare quello che sto usando nel caso in cui possa aiutare chiunque. Ottengo la direzione come cliphexcon l'evento mousewheel ma con il supporto per Firefox. È utile farlo in questo modo nel caso in cui tu stia facendo qualcosa come bloccare lo scorrimento e non riesci a ottenere la parte superiore dello scorrimento corrente.

Guarda una versione live qui .

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

Evento di scorrimento

L' evento scroll si comporta in modo strano in FF (viene generato molte volte a causa dello scorrimento scorrevolezza) ma funziona.

Nota: Il rotolo evento in realtà viene generato quando si trascina la barra di scorrimento, usando i tasti cursore o la rotellina.

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

Evento ruota

Puoi anche dare un'occhiata a MDN, espone una grande informazione sull'evento ruota .

Nota: l'evento ruota viene generato solo quando si utilizza la rotellina del mouse ; i tasti cursore e trascinando la barra di scorrimento non generano l'evento.

Ho letto il documento e l'esempio: ascoltando questo evento attraverso il browser
e dopo alcuni test con FF, IE, chrome, safari, ho finito con questo frammento:

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

Nel caso in cui desideri solo sapere se scorri verso l'alto o verso il basso utilizzando un dispositivo puntatore (mouse o trackpad), puoi utilizzare la proprietà deltaYwheel dell'evento.

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

oppure usa l' estensione della rotellina del mouse , vedi qui .

Ho visto molte versioni di buone risposte qui, ma sembra che alcune persone abbiano problemi con il browser, quindi questa è la mia soluzione.

L'ho usato con successo per rilevare la direzione in FF, IE e Chrome ... Non l'ho provato in Safari dato che uso Windows in genere.

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

Tieni presente che lo uso anche per interrompere qualsiasi scorrimento, quindi se desideri che si verifichi ancora lo scorrimento, devi rimuovere il e.preventDefault(); e.stopPropagation();

Per ignorare qualsiasi snap / momentum / rimbalzo nella parte superiore e inferiore della pagina, ecco una versione modificata della risposta accettata da 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;
});

È possibile determinare la direzione del mouse.

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

Usa questo per trovare la direzione di scorrimento. Questo serve solo per trovare la direzione dello scorrimento verticale. Supporta tutti i 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");
        }

    }

Esempio

questo codice funziona perfettamente con IE, Firefox, Opera e Chrome:

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

'rotellina del mouse' e il deltaY della proprietà devono essere usati nella funzione bind () .

Ricorda: l'utente deve aggiornare il proprio sistema e i propri browser per motivi di sicurezza. Nel 2018, le scuse di "I have IE 7" non hanno senso. Dobbiamo educare gli utenti.

Buona giornata :)

Mantienilo super semplice:

Modo ascoltatore eventi jQuery:

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

Modo ascoltatore di eventi JavaScript Vanilla:

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

La funzione rimane la stessa:

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

Ho scritto un post più approfondito su di esso qui

È possibile utilizzare sia l'opzione di scorrimento che la rotellina del mouse per tenere traccia dei movimenti su e giù contemporaneamente.

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

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

Puoi anche sostituire 'body' con (window).

inserisci un incremento nell'elemento .data ()of fatto scorrere, sarai quindi in grado di testare il numero di volte che lo scorrimento ha raggiunto la cima.

Perché nessuno usa il event oggetto restituito da jQueryscroll?

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

Sto usando chromiume non ho controllato su altri browser se hanno la dirproprietà.

Poiché bindè stato deprecato su v3 ("sostituito da on") ed wheelè ora supportato , dimenticare wheelDelta:

$(window).on('wheel', function(e) {
  if (e.originalEvent.deltaY > 0) {
    console.log('down');
  } else {
    console.log('up');
  }
  if (e.originalEvent.deltaX > 0) {
    console.log('right');
  } else {
    console.log('left');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 style="white-space:nowrap;overflow:scroll">
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
</h1>

wheelCompatibilità del browser dell'evento su MDN (18-03-2019) :

Puoi usare anche questo

$(document).ready(function(){

  var currentscroll_position = $(window).scrollTop();
$(window).on('scroll', function(){
Get_page_scroll_direction();
});

function Get_page_scroll_direction(){
  var running_scroll_position = $(window).scrollTop();
  if(running_scroll_position > currentscroll_position) {
      
      $('.direction_value').text('Scrolling Down Scripts');

  } else {
       
       $('.direction_value').text('Scrolling Up Scripts');

  }
  currentscroll_position = running_scroll_position;
}

});

.direction_value{
  position: fixed;
  height: 30px;
  background-color: #333;
  color: #fff;
  text-align: center;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="direction_value">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>

nel .data()dell'elemento è possibile memorizzare un JSON e prova valori agli eventi di lancio

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

Questo è un rilevamento semplice e facile per quando l'utente scorre lontano dalla parte superiore della pagina e per quando torna all'inizio.

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

Questa è una soluzione ottimale per rilevare la direzione proprio quando lo scorrimento dell'utente finale.

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

});

Dovresti provare questo

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

Ho avuto problemi con lo scorrimento elastico (scorrimento che rimbalza, bande di gomma). Ignorare l'evento di scorrimento verso il basso se vicino alla cima della pagina ha funzionato per me.

var position = $(window).scrollTop();
$(window).scroll(function () {
    var scroll = $(window).scrollTop();
    var downScroll = scroll > position;
    var closeToTop = -120 < scroll && scroll < 120;
    if (downScroll && !closeToTop) {
        // scrolled down and not to close to top (to avoid Ipad elastic scroll-problems)
        $('.top-container').slideUp('fast');
        $('.main-header').addClass('padding-top');
    } else {
        // scrolled up
        $('.top-container').slideDown('fast');
        $('.main-header').removeClass('padding-top');
    }
    position = scroll;
});

Funziona su tutti i browser per PC o telefoni, espandendo le risposte migliori. È possibile creare una finestra dell'oggetto evento più complessa ["scroll_evt"] e quindi chiamarla nella funzione handleScroll (). Questo si innesca per 2 condizioni simultanee, se è trascorso un certo ritardo o viene passato un certo delta per eliminare alcuni trigger indesiderati.

window["scroll_evt"]={"delta":0,"delay":0,"direction":0,"time":Date.now(),"pos":$(window).scrollTop(),"min_delta":120,"min_delay":10};
$(window).scroll(function() {

    var currentScroll = $(this).scrollTop();
    var currentTime = Date.now();
    var boolRun=(window["scroll_evt"]["min_delay"]>0)?(Math.abs(currentTime - window["scroll_evt"]["time"])>window["scroll_evt"]["min_delay"]):false;
    boolRun = boolRun && ((window["scroll_evt"]["min_delta"]>0)?(Math.abs(currentScroll - window["scroll_evt"]["pos"])>window["scroll_evt"]["min_delta"]):false);
    if(boolRun){
        window["scroll_evt"]["delta"] = currentScroll - window["scroll_evt"]["pos"];
        window["scroll_evt"]["direction"] = window["scroll_evt"]["delta"]>0?'down':'up';
        window["scroll_evt"]["delay"] =currentTime - window["scroll_evt"]["time"];//in milisecs!!!
        window["scroll_evt"]["pos"] = currentScroll;
        window["scroll_evt"]["time"] = currentTime;
        handleScroll();
    }
});


function handleScroll(){
    event.stopPropagation();
    //alert(window["scroll_evt"]["direction"]);
    console.log(window["scroll_evt"]);
}