How to detect scroll direction

Question

I want to run a function when someone scrolls down on an element. Something like this:

 $('div').scrollDown(function(){ alert('down') });  $('div').scrollUp(function(){ alert('up') }); 

But those functions don't exist. Is there a solution to this problem? Awwwards seem to be able to do it (logo in navbar changes depending on scroll direction). Unfortunately, the source code is compressed, so no luck there.

Answer 1

I managed to figure it out in the end, so if anyone is looking for the answer:

 //Firefox  $('#elem').bind('DOMMouseScroll', function(e){      if(e.originalEvent.detail > 0) {          //scroll down          console.log('Down');      }else {          //scroll up          console.log('Up');      }       //prevent page fom scrolling      return false;  });   //IE, Opera, Safari  $('#elem').bind('mousewheel', function(e){      if(e.originalEvent.wheelDelta < 0) {          //scroll down          console.log('Down');      }else {          //scroll up          console.log('Up');      }       //prevent page fom scrolling      return false;  }); 

Answer 2

Following example will listen to MOUSE scroll only, no touch nor trackpad scrolls.

It uses jQuery.on() (As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document).

$('#elem').on( 'DOMMouseScroll mousewheel', function ( event ) {   if( event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0 ) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY     //scroll down     console.log('Down');   } else {     //scroll up     console.log('Up');   }   //prevent page fom scrolling   return false; }); 

Works on all browsers.

fiddle: http://jsfiddle.net/honk1/gWnNv/7/