Rilevazione della direzione di scorrimento

Quindi sto cercando di usare il 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 appena provato a utilizzare questo codice ma non ha funzionato:

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

Può essere rilevato memorizzando il precedente valore 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 < = 0 ? 0 : st; // For Mobile or negative scrolling }, false); 

Modo semplice per catturare tutti gli eventi di scorrimento (touch e ruota)

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

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

Esempio

Questa è un’aggiunta a ciò che ha risposto Prateek. Sembra che ci sia un problema tecnico nel codice di IE, quindi ho deciso di modificarlo un po ‘di niente (solo un’altra 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; });}); 

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

Puoi provare a farlo.

 function scrollDetect(){ var lastScroll = 0; window.onscroll = function() { let currentScroll = document.documentElement.scrollTop || document.body.scrollTop; // Get Current Scroll Value if (currentScroll > 0 && lastScroll < = currentScroll){ lastScroll = currentScroll; document.getElementById("scrollLoc").innerHTML = "Scrolling DOWN"; }else{ lastScroll = currentScroll; document.getElementById("scrollLoc").innerHTML = "Scrolling UP"; } }; } scrollDetect(); 
 html,body{ height:100%; width:100%; margin:0; padding:0; } .cont{ height:100%; width:100%; } .item{ margin:0; padding:0; height:100%; width:100%; background: #ffad33; } .red{ background: red; } p{ position:fixed; font-size:25px; top:5%; left:5%; } 
 

0

basta usare la proprietà event.dir

 window.onscroll =function (e) { if (e.dir === 'up') { scrollUp ++; //scroll counters scrollDown = 0;} else if (e.dir === 'down') { scrollDown ++; scrollUp = 0;} }