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 {
      // downscrol         


        

Answer 1

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

Answer 2

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
• Solution 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
• Solution 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
• Solution 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
• Solution 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
• Solution 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
• Solution 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');
            }
        });
    }

Answer 3

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

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

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

Answer 4

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

Answer 5

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

Answer 6

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.