Javascript Girl
  1. Javascript Girl
  3. Détection du sens de défilement
Intereting Posts
Peut utiliser AjaxStatus pendant que la prochaine page est en cours de chargement? Comment automatiser une séquence de feux de circulation JavaScript / html à l'aide de l'interconnexion? Utilisation de jQuery lorsqu'il n'y a pas de connexion Internet Comment obtenir le contrôle javascript depuis l'objet JQuery? Comment modifier la valeur à une variable globale dans la portée en utilisant une fonction? ("Contrôleur comme") Knockout: Changer la classe css en fonction de la valeur observable Qu'est-ce que des sites Web comme YouTube utilisent pour changer l'URL sans avoir recours à la popstate ou avant la charge? Comment appeler la même fonction JavaScript à plusieurs reprises en attendant que la fonction exécute son cours avant de l'invoquer à nouveau, en utilisant le chaînage de méthode? Utilisation de Jquery dans l'application Codeignitor pour mettre à jour les div toutes les 10 secondes Comment empêcher le chevauchement des colonnes dans Highcharts La requête JJA ajax n'est pas déclenchée lorsqu'elle est combinée avec la validation JS côté client Comportement du pointeur entre les objets Pourquoi «tapez-vous de ce« retour »objet? Comment nettoyer l'espion par programme dans Jasmine? JavaScript `undefined` vs` void 0`

Détection du sens 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 scroll sans utiliser jQuery. Sinon, y a-t-il des solutions de contournement?

Je pensais simplement mettre un bouton «en haut», mais j'aimerais éviter cela si je le pouvais.

Je viens juste d'essayer d'utiliser ce code mais ça n'a pas fonctionné: 

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

Il peut être détecté en stockant la valeur de scrollTop précédente et en comparant 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; }, false);

Vous pouvez obtenir la position de la barre de défilement à l'aide de document.documentElement.scrollTop . Et il est simplement question de la comparer au poste précédent.

Utilisez ceci pour trouver le sens de défilement. Ceci est uniquement pour trouver la direction du défilement vertical. Prise en charge de 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

Ceci est un ajout à ce que prateek a répondu. Il semble y avoir un problème dans le code dans IE, alors j'ai décidé de le modifier un peu rien de chic (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; });});

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

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