web-dev-qa-db-fra.com

Détecter l'utilisateur défiler vers le bas ou vers le haut dans jQuery

Duplicate possible:
Différencier entre défilement vers le haut/bas dans jQuery?

Est-il possible de détecter si l'utilisateur fait défiler vers le bas ou vers le haut?

Exemple :

$(window).scroll(function(){

    // IF USER SCROLL DOWN 
           DO ACTION

    // IF USER SCROLL UP 
           DO ANOTHER ACTION

});

Merci

32
Steffi

Pour différencier le défilement vers le haut/le bas dans jQuery, vous pouvez utiliser:

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
$('#yourDiv').bind(mousewheelevt, function(e){

    var evt = window.event || e //equalize event object     
    evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible               
    var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF

    if(delta > 0) {
        //scroll up
    }
    else{
        //scroll down
    }   
});

Cette méthode fonctionne aussi dans les divs qui ont overflow:hidden.

Je l'ai testé avec succès dans FireFox, IE et Chrome.

47
Jordi van Duijn