Rilevamento della direzione di scorrimento


120

Quindi sto cercando di utilizzare JavaScript on scrollper chiamare una funzione. Ma volevo sapere se potevo rilevare la direzione dello scroll senza usare jQuery. In caso contrario, ci sono soluzioni alternative?

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

Ora ho appena provato a utilizzare questo codice ma non ha funzionato:

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

È wheelDeltal'evento dell'evento. Piuttosto non cross-browser. Vedi phrogz.net/js/wheeldelta.html
marekful

1
hmmm non è proprio quello che stavo cercando ma apprezzo il tuo aiuto: P Altri suggerimenti?
dwinnbrown

Risposte:


177

Può essere rilevato memorizzando il scrollTopvalore precedente e confrontando il valore scrollTop corrente con esso.

JavaScript:

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

20
Sarebbe più sicuro inizializzare lastScrollTopin pageYOffset || scrollTop piuttosto che assumere 0
Ed Ballot

Completamente d'accordo !! Grazie @EdBallot. Dovremmo inizializzare lo stesso sull'evento window.onload.
Prateek

@Prateek Grazie per la tua risposta ma non funziona per me ... Sto cercando di "cambiare scena" nella mia webapp che è costruita usando Tumult Hype.
dwinnbrown

Ho aggiunto alcuni commenti nella mia risposta, per favore controllalo. Immagino tu stia usando "element.addEventListener".
Prateek

@Prateek ancora niente, ho paura. Potrebbe essere dovuto al fatto che lo sto eseguendo al caricamento della pagina? Ecco uno screenshot: i.imgur.com/Q0H0T4s.png
dwinnbrown

53

Modo semplice per catturare tutti gli eventi di scorrimento (tocco e rotella)

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

10
Benvenuto in SO, se aggiungi una descrizione alla tua risposta, questa può essere più utile per l'OP e per gli altri.
Alejandro Montilla

32

Usalo per trovare la direzione di scorrimento. Questo serve solo per trovare la direzione dello scorrimento verticale. Supporta tutti i browser incrociati.

var scrollableElement = document.body; //document.getElementById('scrollableElement');

scrollableElement.addEventListener('wheel', checkScrollDirection);

function checkScrollDirection(event) {
  if (checkScrollDirectionIsUp(event)) {
    console.log('UP');
  } else {
    console.log('Down');
  }
}

function checkScrollDirectionIsUp(event) {
  if (event.wheelDelta) {
    return event.wheelDelta > 0;
  }
  return event.deltaY < 0;
}

Esempio


2
Questo è buono, ma sembra funzionare solo per l'utilizzo della rotella di scorrimento
Jonathan.Brink

1
Dai webdoc MDN: Nota: non confondere l'evento wheel con l'evento scroll. L'azione predefinita di un evento wheel è specifica dell'implementazione e non invia necessariamente un evento scroll. Anche quando lo fa, i valori delta * nell'evento wheel non riflettono necessariamente la direzione di scorrimento del contenuto. Pertanto, non fare affidamento sulle proprietà delta * dell'evento ruota per ottenere la direzione di scorrimento. Rileva invece le modifiche ai valori di scrollLeft e scrollTop della destinazione nell'evento di scorrimento. developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event
battaboombattabaam

10

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%;
}
<div class="cont">
  <div class="item"></div>
  <div class="item red"></div>
  <p id="scrollLoc">0</p>
</div>


questo non funziona bene per me. Quando scorro verso l'alto anche fino a una certa altezza, viene visualizzato verso il basso
Sviluppatore

8

Questa è un'aggiunta a ciò che prateek ha risposto Sembra che ci sia un problema tecnico nel codice in IE, quindi ho deciso di modificarlo un po 'per 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;
});});

1
Grazie per il tuo suggerimento ... questo sembra essere collegato all'opzione "Smooth Scrolling" di IE
Kristo

5
  1. Inizializza un oldValue
  2. Ottieni il newValue ascoltando l'evento
  3. Sottrai i due
  4. Concludere dal risultato
  5. Aggiorna oldValue con newValue

// Inizializzazione

let oldValue = 0;

// Ascoltando l'evento

window.addEventListener('scroll', function(e){

    // Get the new Value
    newValue = window.pageYOffset;

    //Subtract the two and conclude
    if(oldValue - newValue < 0){
        console.log("Up");
    } else if(oldValue - newValue > 0){
        console.log("Down");
    }

    // Update the old value
    oldValue = newValue;
});

3

È possibile ottenere la posizione della barra di scorrimento utilizzando document.documentElement.scrollTop. E poi si tratta semplicemente di confrontarlo con la posizione precedente.


Ok, potrei ancora usarlo su un sito web che tradizionalmente non consente lo scorrimento (cioè si adatta al browser al 100% in larghezza e altezza. Grazie
dwinnbrown

2

Questo semplice codice funzionerebbe: controlla la console per i risultati.

let scroll_position = 0;
let scroll_direction;

window.addEventListener('scroll', function(e){
    scroll_direction = (document.body.getBoundingClientRect()).top > scroll_position ? 'up' : 'down';
    scroll_position = (document.body.getBoundingClientRect()).top;
    console.log(scroll_direction);
});

1

Personalmente uso questo codice per rilevare la direzione di scorrimento in javascript ... Devi solo definire una variabile per memorizzare lastcrollvalue e quindi utilizzare questo if & else

let lastscrollvalue;

function headeronscroll() {

    // document on which scroll event will occur
    var a = document.querySelector('.refcontainer'); 

    if (lastscrollvalue == undefined) {

        lastscrollvalue = a.scrollTop;

        // sets lastscrollvalue
    } else if (a.scrollTop > lastscrollvalue) {

        // downscroll rules will be here
        lastscrollvalue = a.scrollTop;

    } else if (a.scrollTop < lastscrollvalue) {

        // upscroll rules will be here
        lastscrollvalue = a.scrollTop;

    }
}

0

Codice semplice

// Events
$(document).on('mousewheel DOMMouseScroll', "element", function(e) {
    let delta = e.originalEvent.wheelDelta;
    
    if (delta > 0 || e.originalEvent.detail < 0) upScrollFunction();
    if (delta < 0 || e.originalEvent.detail > 0) donwScrollFunction();
}

Sebbene questo codice possa rispondere alla domanda, fornire un contesto aggiuntivo su come e / o perché risolve il problema migliorerebbe il valore a lungo termine della risposta.
Paperino il
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.