web-dev-qa-db-fra.com

Détection de la direction de défilement

J'essaie donc d'utiliser JavaScript on scroll pour appeler une fonction. Mais je voulais savoir si je pouvais détecter la direction du rouleau sans utiliser jQuery. Sinon, existe-t-il des solutions de contournement?

Je pensais juste mettre un bouton 'to top' mais voudrais éviter cela si je le pouvais.

Je viens maintenant d'essayer d'utiliser ce code mais cela n'a pas fonctionné:

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

Pour le détecter, stockez la valeur précédente de scrollTop et comparez-la à la valeur actuelle de scrollTop.

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

Un moyen simple d'attraper tous les événements de défilement (toucher et molette)

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

Utilisez ceci pour trouver la direction de défilement. Ceci ne sert qu'à trouver la direction du défilement vertical. Prend en charge tous les navigateurs croisés.

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

    }

Exemple

20
Vasi

Ceci est un ajout à ce que prateek a répondu. Il semble y avoir un petit problème dans le code dans IE alors j’ai décidé de le modifier un peu fantaisiste (juste une autre condition)

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

Vous pouvez essayer de faire ça.

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>
7
davecar21
  1. Initialiser une ancienne valeur
  2. Obtenez la nouvelle valeur en écoutant l'événement
  3. Soustraire les deux
  4. Conclure du résultat
  5. Mettre à jour oldValue avec newValue

// Initialisation

let oldValue = 0;

// Ecoute de l'événement

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

Vous pouvez obtenir la position de la barre de défilement en utilisant document.documentElement.scrollTop. Et ensuite, il suffit de le comparer à la position précédente.

2
Igal S.

Personnellement, j’utilise ce code pour détecter la direction de défilement en javascript ... Il vous suffit de définir une variable pour stocker la valeur lastscroll, puis de l’utiliser si & 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
WagonWolf