Detect your mouse scroll direction

To determine the mouse scroll event like scroll-up or scroll-down, we need a little bit of JavaScript to accomplish the task.

First, we need to add an event listener for mouse scrolling.

$(document).ready(function() {
     window.addEventListener('scroll', myscroll_listener_func);
});

now let's create that function being delegated to handle the event.

var lastScrollTop = 0;
function myscroll_listener_func() {
     var st = window.pageYOffset || document.documentElement.scrollTop;
     if (st > lastScrollTop) {
          console.log("event is scroll down");
     } else {
          console.log("event is scroll up");
     }
     // set back to zero in case negative scrolling
     lastScrollTop = st <= 0 ? 0 : st;
}

Feel free to copy and play with this code.

Enjoy!

Snippets Mouse event scroll mouse up mouse down