How can I determine the direction of a jQuery scroll event?

Question

I'm looking for something to this effect:

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

Any ideas?

Answer 1

Check current scrollTop vs previous scrollTop

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

Answer 2

You can do it without having to keep track of the previous scroll top, as all the other examples require:

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

I am not an expert on this so feel free to research it further, but it appears that when you use $(element).scroll, the event being listened for is a 'scroll' event.

But if you specifically listen for a mousewheel event by using bind, the originalEvent attribute of the event parameter to your callback contains different information. Part of that information is wheelDelta. If it's positive, you moved the mousewheel up. If it's negative, you moved the mousewheel down.

My guess is that mousewheel events will fire when the mouse wheel turns, even if the page does not scroll; a case in which 'scroll' events probably are not fired. If you want, you can call event.preventDefault() at the bottom of your callback to prevent the page from scrolling, and so that you can use the mousewheel event for something other than a page scroll, like some type of zoom functionality.