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.

Store the previous scroll location, then see if the new one is greater than or less than that.

Here's a way to avoid any global variables (fiddle available here):

(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

Existing Solution

There could be 3 solution from this posting and other answer.

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');

        }

    });

Multi Browser Test

I couldn't tested it on Safari

chrome 42 (Win 7)

• Solution 1
  
  
  
  
  • Up : 1 event per 1 scroll
  
  
  • Down : 1 event per 1 scroll
  
  
  
  


• Soltion 2
  
  
  
  
  • Up : Not working
  
  
  • Down : Not working
  
  
  
  


• Solution 3
  
  
  
  
  • Up : 1 event per 1 scroll
  
  
  • Down : 1 event per 1 scroll
  
  
  
  

Firefox 37 (Win 7)

• Solution 1
  
  
  
  
  • Up : 20 events per 1 scroll
  
  
  • Down : 20 events per 1 scroll
  
  
  
  


• Soltion 2
  
  
  
  
  • Up : Not working
  
  
  • Down : 1 event per 1 scroll
  
  
  
  


• Solution 3
  
  
  
  
  • Up : Not working
  
  
  • Down : Not working
  
  
  
  

IE 11 (Win 8)

• Solution 1
  
  
  
  
  • Up : 10 events per 1 scroll (side effect : down scroll occured at last)
  
  
  • Down : 10 events per 1 scroll
  
  
  
  


• Soltion 2
  
  
  
  
  • Up : Not working
  
  
  • Down : Not working
  
  
  
  


• Solution 3
  
  
  
  
  • Up : Not working
  
  
  • Down : 1 event per 1 scroll
  
  
  
  

IE 10 (Win 7)

• Solution 1
  
  
  
  
  • Up : 1 event per 1 scroll
  
  
  • Down : 1 event per 1 scroll
  
  
  
  


• Soltion 2
  
  
  
  
  • Up : Not working
  
  
  • Down : Not working
  
  
  
  


• Solution 3
  
  
  
  
  • Up : 1 event per 1 scroll
  
  
  • Down : 1 event per 1 scroll
  
  
  
  

IE 9 (Win 7)

• Solution 1
  
  
  
  
  • Up : 1 event per 1 scroll
  
  
  • Down : 1 event per 1 scroll
  
  
  
  


• Soltion 2
  
  
  
  
  • Up : Not working
  
  
  • Down : Not working
  
  
  
  


• Solution 3
  
  
  
  
  • Up : 1 event per 1 scroll
  
  
  • Down : 1 event per 1 scroll
  
  
  
  

IE 8 (Win 7)

• Solution 1
  
  
  
  
  • Up : 2 events per 1 scroll (side effect : down scroll occured at last)
  
  
  • Down : 2~4 events per 1 scroll
  
  
  
  


• Soltion 2
  
  
  
  
  • Up : Not working
  
  
  • Down : Not working
  
  
  
  


• Solution 3
  
  
  
  
  • Up : 1 event per 1 scroll
  
  
  • Down : 1 event per 1 scroll
  
  
  
  

Combined Solution

I checked that side effect from IE 11 and IE 8 is come from if else statement. So, I replaced it with if else if statement as following.

From the multi browser test, I decided to use Solution 3 for common browsers and Solution 1 for firefox and IE 11.

I referred this answer to detect 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');

            }

        });

    }

I understand there has already been an accepted answer, but wanted to post what I am using in case it can help anyone. I get the direction like cliphex with the mousewheel event but with support for Firefox. It's useful doing it this way in case you are doing something like locking scroll and can't get the current scroll top.

See a live version here.

$(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

    }

});

Scroll Event

The scroll event behaves oddly in FF (it is fired a lot of times because of the smoothness scrolling) but it works.

Note: The scroll event actually is fired when dragging the scroll bar, using cursor keys or mousewheel.

//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);

});

Wheel Event

You also may take a look at MDN, it exposes a great information about the Wheel Event.

Note: The wheel event is fired only when using the mousewheel; cursor keys and dragging the scroll bar does not fire the event.

I read the document and the example: Listening to this event across browser

and after some tests with FF, IE, chrome, safari, I ended up with this snippet:

//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);

});

In case you just want to know if you scroll up or down using a pointer device (mouse or track pad) you can use the deltaY property of the wheel event.

$('.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; 

} 

or use the mousewheel extension, see here.

I have seen many version of good answers here but it seems some folks are having cross browser issues so this is my fix.

I have used this successfully to detect direction in FF, IE and Chrome ... I haven't tested it in safari as I use windows typically.

$("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");

        }

    }

});

Keep in mind I also use this to stop any scrolling so if you want scrolling to still occur you must remove the e.preventDefault(); e.stopPropagation();

To ignore any snap / momentum / bounce back at the top and bottom of the page, here is a modified version of Josiah's accepted answer:

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;

});

You can determin mousewhell direction.

$(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');

    }

});

Use this to find the scroll direction. This is only to find the direction of the Vertical Scroll. Supports all cross browsers.

    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");

        }



    }

Example

stock an increment in the .data () of element scrolled, you will then be able to test number of times the scroll reached top.

Keep it super simple:

jQuery Event Listener Way:

$(window).on('wheel', function(){

  whichDirection(event);

});

Vanilla JavaScript Event Listener Way:

if(window.addEventListener){

  addEventListener('wheel', whichDirection, false);

} else if (window.attachEvent) {

  attachEvent('wheel', whichDirection, false);

}

Function Remains The Same:

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);

  }

}

I wrote a more indepth post on it here
​​​​​​​

You can use both scroll and mousewheel option to track up and down movement at once.

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



if (event.originalEvent.wheelDelta >= 0) {

      console.log('moving down');   

    }

    else {

      console.log('moving up'); 

    }

});

You can replace 'body' with (window) as well.

this code work fine with IE, Firefox, Opera and Chrome:

$(window).bind('wheel mousewheel', function(event) {

      if (event.originalEvent.deltaY >= 0) {

          console.log('Scroll up');

      }

      else {

          console.log('Scroll down');

      }

  });

'wheel mousewheel' and the property deltaY must be use in bind() function.

Remember : You're user must update their system and browsers for security reasons. In 2018, the excuses of "I have IE 7" is a nonsense. We must educate users.

Have a good day :)

For those having problems with elastic scrolling, please use this answer

How to detect scroll direction

in the .data() of the element you can store a JSON and test values to launch events

{ top : 1,

   first_top_event: function(){ ...},

   second_top_event: function(){ ...},

   third_top_event: function(){ ...},

   scroll_down_event1: function(){ ...},

   scroll_down_event2: function(){ ...}

}

This is simple and easy detection for when the user scrolls away from the top of the page and for when they return to the top.

$(window).scroll(function() {

    if($(window).scrollTop() > 0) {

        // User has scrolled

    } else {

        // User at top of page

    }

});

This is an optimal solution for detecting the direction just when the user end scrolling.

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));



});

You Should try this

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();

    });

Why nobody use the event object returned by jQuery on 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();

});

I'm using chromium and I didn't checked on other browsers if they have the dir property.