Rilevamento direzione scorrimento

Question

Quindi sto cercando di utilizzare il codice JavaScript on scroll per chiamare una funzione. Ma volevo sapere se potevo rilevare la direzione dello scroll senza usare jQuery. Se no, allora ci sono soluzioni alternative?

Stavo pensando di mettere un pulsante "in alto" ma vorrei evitarlo se potessi.

ho ora solo provato ad utilizzare questo codice, ma non ha funzionato:

if document.body.scrollTop <= 0 { 
    alert ("scrolling down") 
} else { 
    alert ("scrolling up") 
} 

Answer 1

è possibile ottenere la posizione della barra di scorrimento con document.documentElement.scrollTop. E poi è semplicemente questione di confrontarlo con la posizione precedente.

Answer 2

Può essere rilevato memorizzando il valore precedente di ScrollTop e confrontando il valore corrente di ScrollTop con esso.

JS:

var lastScrollTop = 0; 
// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element. 
element.addEventListener("scroll", function(){ // or window.addEventListener("scroll".... 
    var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426" 
    if (st > lastScrollTop){ 
     // downscroll code 
    } else { 
     // upscroll code 
    } 
    lastScrollTop = st; 
}, false); 

Answer 3

Utilizzare questo per trovare la direzione di scorrimento. Questo è solo per trovare la direzione della Scorrimento verticale. Supporta tutti i browser incrociati.

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

    } 

Example

Answer 4

Questa è un'aggiunta a quanto Prateek ha answered.There sembra essere un difetto nel codice di IE così ho deciso di modificarlo un po 'di fantasia nulla (solo un altro condizione)

$('document').ready(function() { 
var lastScrollTop = 0; 
$(window).scroll(function(event){ 
    var st = $(this).scrollTop(); 
    if (st > lastScrollTop){ 
     console.log("down") 
    } 
    else if(st == lastScrollTop) 
    { 
    //do nothing 
    //In IE this is an important condition because there seems to be some instances where the last scrollTop is equal to the new one 
    } 
    else { 
     console.log("up") 
    } 
    lastScrollTop = st; 
});}); 

Answer 5

modo semplice per catturare tutti gli eventi di scorrimento (touch e ruote)

window.onscroll = function(e) { 
    // print "false" if direction is down and "true" if up 
    console.log(this.oldScroll > this.scrollY); 
    this.oldScroll = this.scrollY; 
}