Je cherche quelque chose à cet effet:

$(window).scroll(function(event){
   if (/* magic code*/ ){
       // upscroll code
   } else {
      // downscroll code
   }
});

Des idées?

Vérifier le courant par scrollToprapport au précédentscrollTop

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});

Vous pouvez le faire sans avoir à garder trace du haut de défilement précédent, comme tous les autres exemples l'exigent:

$(window).bind('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
        console.log('Scroll up');
    }
    else {
        console.log('Scroll down');
    }
});

Je ne suis pas un expert en la matière, alors n'hésitez pas à faire des recherches plus approfondies, mais il semble que lorsque vous utilisez $(element).scroll, l'événement écouté est un événement de "défilement".

Mais si vous écoutez spécifiquement un mousewheelévénement à l'aide de bind, l' originalEventattribut du paramètre d'événement à votre rappel contient des informations différentes. Une partie de cette information est wheelDelta. S'il est positif, vous avez déplacé la molette de la souris vers le haut. S'il est négatif, vous avez déplacé la molette de la souris vers le bas.

Je suppose que les mousewheelévénements se déclencheront lorsque la molette de la souris tournera, même si la page ne défile pas; un cas dans lequel les événements de «défilement» ne sont probablement pas déclenchés. Si vous le souhaitez, vous pouvez appeler event.preventDefault()au bas de votre rappel pour empêcher la page de défiler et pour pouvoir utiliser l'événement molette pour autre chose qu'un défilement de page, comme un type de fonctionnalité de zoom.

Stockez l'emplacement de défilement précédent, puis voyez si le nouveau est supérieur ou inférieur à cela.

Voici un moyen d'éviter toute variable globale ( violon disponible ici ):

(function () {
    var previousScroll = 0;

    $(window).scroll(function(){
       var currentScroll = $(this).scrollTop();
       if (currentScroll > previousScroll){
           alert('down');
       } else {
          alert('up');
       }
       previousScroll = currentScroll;
    });
}()); //run this anonymous function immediately

Solution existante

Il pourrait y avoir 3 solutions à partir de cette publication et d' autres réponses .

Solution 1

    var lastScrollTop = 0;
    $(window).on('scroll', function() {
        st = $(this).scrollTop();
        if(st < lastScrollTop) {
            console.log('up 1');
        }
        else {
            console.log('down 1');
        }
        lastScrollTop = st;
    });

Solution 2

    $('body').on('DOMMouseScroll', function(e){
        if(e.originalEvent.detail < 0) {
            console.log('up 2');
        }
        else {
            console.log('down 2');
        }
    });

Solution 3

    $('body').on('mousewheel', function(e){
        if(e.originalEvent.wheelDelta > 0) {
            console.log('up 3');
        }
        else {
            console.log('down 3');
        }
    });

Test multi-navigateur

Je n'ai pas pu le tester sur Safari

chrome 42 (Win 7)

• Solution 1
  • Up: 1 événement pour 1 parchemin
  • Bas: 1 événement pour 1 parchemin
• Soltion 2
  • Up: ne fonctionne pas
  • Bas: ne fonctionne pas
• Solution 3
  • Up: 1 événement pour 1 parchemin
  • Bas: 1 événement pour 1 parchemin

Firefox 37 (Win 7)

• Solution 1
  • Up: 20 événements pour 1 parchemin
  • Bas: 20 événements pour 1 parchemin
• Soltion 2
  • Up: ne fonctionne pas
  • Bas: 1 événement pour 1 parchemin
• Solution 3
  • Up: ne fonctionne pas
  • Bas: ne fonctionne pas

IE 11 (Win 8)

• Solution 1
  • Haut: 10 événements pour 1 parchemin (effet secondaire: le défilement bas s'est enfin produit)
  • Bas: 10 événements pour 1 parchemin
• Soltion 2
  • Up: ne fonctionne pas
  • Bas: ne fonctionne pas
• Solution 3
  • Up: ne fonctionne pas
  • Bas: 1 événement pour 1 parchemin

IE 10 (Win 7)

• Solution 1
  • Up: 1 événement pour 1 parchemin
  • Bas: 1 événement pour 1 parchemin
• Soltion 2
  • Up: ne fonctionne pas
  • Bas: ne fonctionne pas
• Solution 3
  • Up: 1 événement pour 1 parchemin
  • Bas: 1 événement pour 1 parchemin

IE 9 (Win 7)

• Solution 1
  • Up: 1 événement pour 1 parchemin
  • Bas: 1 événement pour 1 parchemin
• Soltion 2
  • Up: ne fonctionne pas
  • Bas: ne fonctionne pas
• Solution 3
  • Up: 1 événement pour 1 parchemin
  • Bas: 1 événement pour 1 parchemin

IE 8 (Win 7)

• Solution 1
  • Haut: 2 événements pour 1 parchemin (effet secondaire: le défilement bas s'est enfin produit)
  • Bas: 2 à 4 événements par 1 défilement
• Soltion 2
  • Up: ne fonctionne pas
  • Bas: ne fonctionne pas
• Solution 3
  • Up: 1 événement pour 1 parchemin
  • Bas: 1 événement pour 1 parchemin

Solution combinée

J'ai vérifié que les effets secondaires d'IE 11 et IE 8 proviennent de la if elsedéclaration. Donc, je l'ai remplacé par la if else ifdéclaration suivante.

À partir du test multi-navigateurs, j'ai décidé d'utiliser la solution 3 pour les navigateurs courants et la solution 1 pour Firefox et IE 11.

J'ai référé cette réponse pour détecter IE 11.

    // Detect IE version
    var iev=0;
    var ieold = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
    var trident = !!navigator.userAgent.match(/Trident\/7.0/);
    var rv=navigator.userAgent.indexOf("rv:11.0");

    if (ieold) iev=new Number(RegExp.$1);
    if (navigator.appVersion.indexOf("MSIE 10") != -1) iev=10;
    if (trident&&rv!=-1) iev=11;

    // Firefox or IE 11
    if(typeof InstallTrigger !== 'undefined' || iev == 11) {
        var lastScrollTop = 0;
        $(window).on('scroll', function() {
            st = $(this).scrollTop();
            if(st < lastScrollTop) {
                console.log('Up');
            }
            else if(st > lastScrollTop) {
                console.log('Down');
            }
            lastScrollTop = st;
        });
    }
    // Other browsers
    else {
        $('body').on('mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0) {
                console.log('Up');
            }
            else if(e.originalEvent.wheelDelta < 0) {
                console.log('Down');
            }
        });
    }

Je comprends qu'il y a déjà eu une réponse acceptée, mais je voulais publier ce que j'utilise au cas où cela pourrait aider quelqu'un. J'obtiens la direction comme cliphexavec l'événement mousewheel mais avec le support de Firefox. Il est utile de le faire de cette façon au cas où vous faites quelque chose comme le verrouillage du défilement et que vous ne pouvez pas obtenir le haut du défilement actuel.

Voir une version live ici .

$(window).on('mousewheel DOMMouseScroll', function (e) {

    var direction = (function () {

        var delta = (e.type === 'DOMMouseScroll' ?
                     e.originalEvent.detail * -40 :
                     e.originalEvent.wheelDelta);

        return delta > 0 ? 0 : 1;
    }());

    if(direction === 1) {
       // scroll down
    }
    if(direction === 0) {
       // scroll up
    }
});

Événement de défilement

L' événement de défilement se comporte étrangement dans FF (il est déclenché de nombreuses fois en raison du défilement fluide) mais il fonctionne.

Remarque: Le défilement événement fait est tiré lors du déplacement de la barre de défilement, à l' aide des touches du curseur ou la molette.

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "35px"
});

//binds the "scroll" event
$(window).scroll(function (e) {
    var target = e.currentTarget,
        self = $(target),
        scrollTop = window.pageYOffset || target.scrollTop,
        lastScrollTop = self.data("lastScrollTop") || 0,
        scrollHeight = target.scrollHeight || document.body.scrollHeight,
        scrollText = "";

    if (scrollTop > lastScrollTop) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    $("#test").html(scrollText +
      "<br>innerHeight: " + self.innerHeight() +
      "<br>scrollHeight: " + scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>lastScrollTop: " + lastScrollTop);

    if (scrollHeight - scrollTop === self.innerHeight()) {
      console.log("► End of scroll");
    }

    //saves the current scrollTop
    self.data("lastScrollTop", scrollTop);
});

Événement de roue

Vous pouvez également jeter un oeil à MDN, il expose une grande information sur l' événement Wheel .

Remarque: l' événement de roue est déclenché uniquement lors de l'utilisation de la roue de souris ; les touches de curseur et le déplacement de la barre de défilement ne déclenchent pas l'événement.

J'ai lu le document et l'exemple: en écoutant cet événement à travers le navigateur
et après quelques tests avec FF, IE, chrome, safari, je me suis retrouvé avec cet extrait:

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "15px"
});

//attach the "wheel" event if it is supported, otherwise "mousewheel" event is used
$("html").on(("onwheel" in document.createElement("div") ? "wheel" : "mousewheel"), function (e) {
    var evt = e.originalEvent || e;

    //this is what really matters
    var deltaY = evt.deltaY || (-1 / 40 * evt.wheelDelta), //wheel || mousewheel
        scrollTop = $(this).scrollTop() || $("body").scrollTop(), //fix safari
        scrollText = "";

    if (deltaY > 0) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    //console.log("Event: ", evt);
    $("#test").html(scrollText +
      "<br>clientHeight: " + this.clientHeight +
      "<br>scrollHeight: " + this.scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>deltaY: " + deltaY);
});

Dans le cas où vous souhaitez simplement savoir si vous faites défiler vers le haut ou vers le bas à l'aide d'un périphérique de pointeur (souris ou pavé tactile ), vous pouvez utiliser la propriété deltaY de l' wheelévénement.

$('.container').on('wheel', function(event) {
  if (event.originalEvent.deltaY > 0) {
    $('.result').append('Scrolled down!<br>');
  } else {
    $('.result').append('Scrolled up!<br>');
  }
});

.container {
  height: 200px;
  width: 400px;
  margin: 20px;
  border: 1px solid black;
  overflow-y: auto;
}
.content {
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="content">
    Scroll me!
  </div>
</div>

<div class="result">
  <p>Action:</p>
</div>

var tempScrollTop, currentScrollTop = 0; 

$(window).scroll(function(){ 

   currentScrollTop = $("#div").scrollTop(); 

   if (tempScrollTop > currentScrollTop ) {
       // upscroll code
   }
  else if (tempScrollTop < currentScrollTop ){
      // downscroll code
  }

  tempScrollTop = currentScrollTop; 
} 

ou utilisez l' extension de roue de souris , voir ici .

J'ai vu de nombreuses versions de bonnes réponses ici, mais il semble que certaines personnes rencontrent des problèmes de navigateur, c'est donc ma solution.

J'ai utilisé cela avec succès pour détecter la direction dans FF, IE et Chrome ... Je ne l'ai pas testé en safari car j'utilise généralement Windows.

$("html, body").bind({'mousewheel DOMMouseScroll onmousewheel touchmove scroll': 
    function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();

        //Determine Direction
        if (e.originalEvent.wheelDelta && e.originalEvent.wheelDelta >= 0) {
            //Up
            alert("up");

        } else if (e.originalEvent.detail && e.originalEvent.detail <= 0) {
            //Up
            alert("up");

        } else {
            //Down
            alert("down");
        }
    }
});

Gardez à l'esprit que j'utilise également ceci pour arrêter tout défilement, donc si vous voulez que le défilement continue, vous devez supprimer le e.preventDefault(); e.stopPropagation();

Pour ignorer tout snap / momentum / rebond en haut et en bas de la page, voici une version modifiée de la réponse acceptée par Josiah :

var prevScrollTop = 0;
$(window).scroll(function(event){

    var scrollTop = $(this).scrollTop();

    if ( scrollTop < 0 ) {
        scrollTop = 0;
    }
    if ( scrollTop > $('body').height() - $(window).height() ) {
        scrollTop = $('body').height() - $(window).height();
    }

    if (scrollTop >= prevScrollTop && scrollTop) {
        // scrolling down
    } else {
        // scrolling up
    }

    prevScrollTop = scrollTop;
});

Vous pouvez déterminer la direction de la souris.

$(window).on('mousewheel DOMMouseScroll', function (e) {
    var delta = e.originalEvent.wheelDelta ? 
                   e.originalEvent.wheelDelta : -e.originalEvent.detail;

    if (delta >= 0) {
        console.log('scroll up');
    } else {
        console.log('scroll down');
    }
});

Utilisez-le pour trouver le sens du défilement. Il s'agit uniquement de 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

ce code fonctionne bien avec IE, Firefox, Opera et Chrome:

$(window).bind('wheel mousewheel', function(event) {
      if (event.originalEvent.deltaY >= 0) {
          console.log('Scroll down');
      }
      else {
          console.log('Scroll up');
      }
  });

'wheel mousewheel' et la propriété deltaY doivent être utilisés dans la fonction bind () .

N'oubliez pas: votre utilisateur doit mettre à jour son système et ses navigateurs pour des raisons de sécurité. En 2018, les excuses de "J'ai IE 7" sont absurdes. Nous devons éduquer les utilisateurs.

Bonne journée :)

Restez simple:

jQuery Event Listener Way:

$(window).on('wheel', function(){
  whichDirection(event);
});

Méthode d'écoute d'événement JavaScript Vanilla:

if(window.addEventListener){
  addEventListener('wheel', whichDirection, false);
} else if (window.attachEvent) {
  attachEvent('wheel', whichDirection, false);
}

La fonction reste la même:

function whichDirection(event){
  console.log(event + ' WheelEvent has all kinds of good stuff to work with');
  var scrollDirection = event.deltaY;
  if(scrollDirection === 1){
    console.log('meet me at the club, going down', scrollDirection);
  } else if(scrollDirection === -1) {
    console.log('Going up, on a tuesday', scrollDirection);
  }
}

J'ai écrit un post plus sur elle indepth ici

Vous pouvez utiliser les options de défilement et de molette pour suivre les mouvements de haut en bas à la fois.

 $('body').bind('scroll mousewheel', function(event) {

if (event.originalEvent.wheelDelta >= 0) {
      console.log('moving down');   
    }
    else {
      console.log('moving up'); 
    }
});

Vous pouvez également remplacer «corps» par (fenêtre).

stockez un incrément dans l' .data ()élément de défilement, vous pourrez alors tester le nombre de fois que le défilement a atteint le sommet.

Pourquoi personne n'utilise l' eventobjet renvoyé par jQuerysur scroll?

$window.on('scroll', function (event) {
    console.group('Scroll');
    console.info('Scroll event:', event);
    console.info('Position:', this.pageYOffset);
    console.info('Direction:', event.originalEvent.dir); // Here is the direction
    console.groupEnd();
});

J'utilise chromiumet je n'ai pas vérifié sur d'autres navigateurs s'ils ont la dirpropriété.

Depuis binda été déconseillé sur v3 ("remplacé par on") et wheelest maintenant pris en charge , oubliez wheelDelta:

$(window).on('wheel', function(e) {
  if (e.originalEvent.deltaY > 0) {
    console.log('down');
  } else {
    console.log('up');
  }
  if (e.originalEvent.deltaX > 0) {
    console.log('right');
  } else {
    console.log('left');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 style="white-space:nowrap;overflow:scroll">
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
</h1>

wheelCompatibilité du navigateur de l'événement sur les MDN (2019-03-18) :

Vous pouvez également l'utiliser

$(document).ready(function(){

  var currentscroll_position = $(window).scrollTop();
$(window).on('scroll', function(){
Get_page_scroll_direction();
});

function Get_page_scroll_direction(){
  var running_scroll_position = $(window).scrollTop();
  if(running_scroll_position > currentscroll_position) {
      
      $('.direction_value').text('Scrolling Down Scripts');

  } else {
       
       $('.direction_value').text('Scrolling Up Scripts');

  }
  currentscroll_position = running_scroll_position;
}

});

.direction_value{
  position: fixed;
  height: 30px;
  background-color: #333;
  color: #fff;
  text-align: center;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="direction_value">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>

dans l' .data()élément, vous pouvez stocker un JSON et tester des valeurs pour lancer des événements

{ top : 1,
   first_top_event: function(){ ...},
   second_top_event: function(){ ...},
   third_top_event: function(){ ...},
   scroll_down_event1: function(){ ...},
   scroll_down_event2: function(){ ...}
}

Il s'agit d'une détection simple et facile lorsque l'utilisateur défile en haut de la page et lorsqu'il revient en haut.

$(window).scroll(function() {
    if($(window).scrollTop() > 0) {
        // User has scrolled
    } else {
        // User at top of page
    }
});

Il s'agit d'une solution optimale pour détecter la direction au moment où l'utilisateur fait défiler.

var currentScrollTop = 0 ;

$(window).bind('scroll', function () {     

    scrollTop = $(this).scrollTop();

    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {

        if(scrollTop > currentScrollTop){
            // downscroll code
            $('.mfb-component--bl').addClass('mfbHide');
        }else{
            // upscroll code
            $('.mfb-component--bl').removeClass('mfbHide');
        }
        currentScrollTop = scrollTop;

    }, 250));

});

Vous devriez essayer ceci

var scrl
$(window).scroll(function(){
        if($(window).scrollTop() < scrl){
            //some code while previous scroll
        }else{
            if($(window).scrollTop() > 200){
                //scroll while downward
            }else{//scroll while downward after some specific height
            }
        }
        scrl = $(window).scrollTop();
    });

J'ai eu des problèmes avec le défilement élastique (rebond de défilement, élastique). Ignorer l'événement de défilement vers le bas s'il était proche du haut de la page a fonctionné pour moi.

var position = $(window).scrollTop();
$(window).scroll(function () {
    var scroll = $(window).scrollTop();
    var downScroll = scroll > position;
    var closeToTop = -120 < scroll && scroll < 120;
    if (downScroll && !closeToTop) {
        // scrolled down and not to close to top (to avoid Ipad elastic scroll-problems)
        $('.top-container').slideUp('fast');
        $('.main-header').addClass('padding-top');
    } else {
        // scrolled up
        $('.top-container').slideDown('fast');
        $('.main-header').removeClass('padding-top');
    }
    position = scroll;
});

Cela fonctionne dans tous les navigateurs de PC ou de téléphones, développant les meilleures réponses. On peut construire une fenêtre d'objet d'événement plus complexe ["scroll_evt"] puis l'appeler dans la fonction handleScroll (). Celui-ci se déclenche pour 2 conditions simultanées, si un certain délai s'est écoulé ou qu'un certain delta est passé pour éliminer certains déclencheurs indésirables.

window["scroll_evt"]={"delta":0,"delay":0,"direction":0,"time":Date.now(),"pos":$(window).scrollTop(),"min_delta":120,"min_delay":10};
$(window).scroll(function() {

    var currentScroll = $(this).scrollTop();
    var currentTime = Date.now();
    var boolRun=(window["scroll_evt"]["min_delay"]>0)?(Math.abs(currentTime - window["scroll_evt"]["time"])>window["scroll_evt"]["min_delay"]):false;
    boolRun = boolRun && ((window["scroll_evt"]["min_delta"]>0)?(Math.abs(currentScroll - window["scroll_evt"]["pos"])>window["scroll_evt"]["min_delta"]):false);
    if(boolRun){
        window["scroll_evt"]["delta"] = currentScroll - window["scroll_evt"]["pos"];
        window["scroll_evt"]["direction"] = window["scroll_evt"]["delta"]>0?'down':'up';
        window["scroll_evt"]["delay"] =currentTime - window["scroll_evt"]["time"];//in milisecs!!!
        window["scroll_evt"]["pos"] = currentScroll;
        window["scroll_evt"]["time"] = currentTime;
        handleScroll();
    }
});


function handleScroll(){
    event.stopPropagation();
    //alert(window["scroll_evt"]["direction"]);
    console.log(window["scroll_evt"]);
}