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

Asked 1/12, 2010 at 16:57 Answered 2/7, 2019 at 13:31

376

I'm looking for something to this effect:

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

Any ideas?

Labiovelar answered 1/12, 2010 at 16:57 Comment(2)

For those having problems with elastic scrolling, please use this answer https://mcmap.net/q/88301/-how-to-detect-scroll-direction – Crosslink 20/11, 2013 at 7:48

Easiest to use the wheel event these days : https://mcmap.net/q/88301/-how-to-detect-scroll-direction. – Barabbas 29/10, 2015 at 11:41

757

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

Diablerie answered 1/12, 2010 at 17:4 Comment(17)

Any way to set a sensibility for this ? – Ultrasonic 30/11, 2012 at 0:24

I made an example at this codepen. Maybe I'll update update this answer with a jQuery plugin because of the popularity. – Diablerie 30/11, 2012 at 20:15

Have you tried this if you come back to a previous page having this code ? If you scroll down your page, let say 500PX. Go to another page and then back to initial page. Some browsers keep the scroll position and will bring you back down the page. Will you have a starting lastScrollTop at 0 or will it be properly initialised ?? – Handstand 23/8, 2013 at 12:57

@Handstand - well worst case scenario the first scroll event would update the variable and the second event would be accurate (.. it would only matter on an upscroll after back navigation). This could be fixed by setting var lastScrollTop = $(window).scrollTop() after the browser updates the scroll position on page load. – Diablerie 26/8, 2013 at 17:7

On Macs, anyone else notice if you scroll all the way to the bottom that it bounces and will fire off the event? – Prudi 1/4, 2014 at 9:58

You might as well take note of scrollLeft() as well. Plenty of scrolling mice and trackpads scroll left and right. – Scuffle 11/5, 2014 at 15:50

An update on this: Be careful that some browsers, specially IE 11 on Windows 8, can fire a scroll event subpixel-based (smooth scrolling). But because it reports scrollTop as an integer, your previous scroll value could be the same as the current one. – Minnaminnaminnie 26/11, 2014 at 0:10

@Minnaminnaminnie Thanks. I checked same problem at IE 8 on Win 7 and IE 11 on Win 8. In this case, this answer helped me to solve problem. – Brumaire 18/4, 2015 at 13:44

Just a small suggestion on that: Instead of if (st > lastScrollTop) you could also use if (st >= lastScrollTop). Otherwise, I noticed that when I scrolled up, for a moment it was executing the scroll down code before firing up the scroll up code. – Vulturine 20/8, 2015 at 10:47

How about detect scroll direction hover non-scrollable content ? – Echoechoic 24/9, 2015 at 13:15

@cocoacoder did you find anything about the sensibility thing? I found this #14427048 – Hyperpituitarism 30/10, 2016 at 11:51

When putting function to fire inside "up" or "down" scroll, it fires a loooot of times.. meaning if you scroll "heavily" on mac (fast pull up with 3 fingers on touchpad), the function will be executed constantly until scroll actually stops. How come no one mentioned that as its quite important ? Is there a way to detect just scroll start + direction and prevent actual scroll with mouse wheel ? – Relaxation 21/5, 2017 at 21:57

@Relaxation I made and example here, (see the comments above) – Diablerie 24/5, 2017 at 5:45

@JosiahRuddell Thank you, but this stil show multiple "down" when scrolled "once". I say "once" as I make usual long scroll down, It should fire only once. For that I managed to make it work with the locker on first scroll and releases locker afted 250ms. In chrome works like a charm, firefox fires two scrolls, on safari it doesnt really work..well, sensitivity is high so if scrolling gently wanted effect is achieved. This is how the scroll should work here.Plugin for WP is pretty shitty and awful to build page so I had to made it myself.. – Relaxation 24/5, 2017 at 8:37

Im talking about mouse wheel scroll just to clarify :) – Relaxation 24/5, 2017 at 8:37

this what i thought up on my own, but this approach creates so many potential issues!! – Phial 15/3, 2019 at 22:29

@cocoacoder try this: var lastScrTop = 0; var lastScrolltrig = 0; $(window).scroll(function(event){ var st = $(this).scrollTop(); if (st > lastScrTop){ // downscroll code lastScrolltrig = 0; } else { // upscroll code if ( lastScrolltrig === 0 ) { lastScrolltrig = $(this).scrollTop(); } if ( lastScrolltrig - $(this).scrollTop() >= 300 ) { // 300px buffer, run code here } } lastScrTop = st; }); – Censorship 6/10, 2020 at 17:2

181

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.

Catchy answered 11/5, 2012 at 4:46 Comment(13)

Nice but sadly the one and only Firefox is not supporting it developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/… (tested in FF v15). :C – Gustin 17/9, 2012 at 14:7

This was useful for me: I needed to detect scrolling, even though the page itself didn't actually scroll, so scrollTop didn't update. In fact, $(window).scroll() didn't fire at all. – Interested 14/12, 2012 at 14:16

It's nice that you don't need the old state. However this technique will not work on mobiles or tablets, since they don't have a mousewheel! – Franci 1/8, 2013 at 4:43

I found this to be a nice and easy solution in firefox and chrome. Thank you good sir – Babi 23/1, 2014 at 20:45

This approach won't work if I scroll with the keyboard. It's definitely an interesting approach for things like zoom, but I don't think it addresses the scroll direction question. – Parabolic 4/2, 2014 at 9:33

while I used this technique until now, it won't work if the page is scrolled without the mousewheel. e.g. via mouse on the scrollbar. Also: Firefox only supports DOMmousescroll – Lasky 25/7, 2014 at 7:46

$("html, body").bind({'mousewheel DOMMouseScroll onmousewheel touchmove scroll': function(e) { //... }); works for me in detecting all browser scroll data – Knox 4/11, 2014 at 19:15

Can the console.log wait until the scroll happens twice? – Aixenprovence 11/11, 2014 at 16:18

that's just plain bad. Touch scroll? scroll by clicking on the scrollbar and moving it down? just nope – Adjustment 11/5, 2015 at 9:40

+1 because this led me in the right direction to solve my problem: event.wheelDeltaX and event.wheelDeltaY – Cornaceous 3/8, 2016 at 23:47

Note that mousewheel and scroll are not the same events. This will only work if user scrolls with mousewheel or touchpad. – Journeywork 3/9, 2016 at 7:47

Dude you saved my day with your mousewheel event. For some reason I couldn't get scroll event fired up at all, but your solution worked like a charm!!! Thanx! – Burka 7/9, 2017 at 13:41

Good idea, but Firefox (75) doesn't like it at all. Even when doing it like @Knox described. – Teresetereshkova 25/3, 2020 at 15:22

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

Brumaire answered 18/4, 2015 at 17:46 Comment(4)

If someone could add result of Safari browser, it would be helpful to supplement solution. – Brumaire 18/4, 2015 at 18:7

Oops! I found that Mobile Chrome and Android default browser are only covered by Solution 1. So it would be better to use both Solution 1 and 3 together to cover various browsers. – Brumaire 18/4, 2015 at 18:25

Will not work if the design is a fixed layout design. If you want to detect the scroll direction on a static no-scroll website, Firefox and IE11 will not work – Aden 5/1, 2016 at 22:4

I find that when I use this it uses the "Other Browsers" in chrome, this is not really much use when you wish to detect scrolling by both mouse wheel and scroll bar. .scroll will detect both types of scrolling in chrome. – Dreiser 6/9, 2019 at 9:50

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

Shaunshauna answered 1/12, 2010 at 17:4 Comment(0)

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

Karolynkaron answered 3/1, 2015 at 5:56 Comment(1)

@EtienneMartin the above code relies on jQuery if that's what was causing your error. Please see the attached fiddle to see it working. – Karolynkaron 28/1, 2015 at 20:16

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

Irisirisa answered 1/12, 2010 at 16:58 Comment(1)

I have a fixed panel view which disables the actual scroll bar, so I needed to detect the direction from the mouse wheel. Your mousewheel solution worked perfectly cross browser so thankyou for that! – Aden 5/1, 2016 at 22:39

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>

Demiurge answered 12/1, 2016 at 14:41 Comment(1)

This link says not to rely on deltaY developer.mozilla.org/en-US/docs/Web/Events/wheel – Gard 27/4, 2018 at 5:39

Update 2021-04-07

Bobort in a comment (thanks!) pointed to the new note added in the wheel documentation:

Don't confuse the wheel event with the scroll event. The default action of a wheel event is implementation-specific, and doesn't necessarily dispatch a scroll event. Even when it does, the delta* values in the wheel event don't necessarily reflect the content's scrolling direction. Therefore, do not rely on the wheel event's delta* properties to get the scrolling direction. Instead, detect value changes of scrollLeft and scrollTop of the target in the scroll event.

However, the example given in the documentation uses delta to scale, which implies a scroll up for zooming out and scroll down for zooming in.

The code below worked for me in different browsers to detect direction, but given that note, use it at your own risk.

Original answer

Since bind has been deprecated on v3 ("superseded by on") and wheel is now supported, forget wheelDelta:

$(window).on('wheel', function(e) {
  if (e.originalEvent.deltaY > 0) {
    console.log('down');
  } else if (e.originalEvent.deltaY < 0) {
    console.log('up');
  } else if (e.originalEvent.deltaX > 0) {
    console.log('right');
  } else if (e.originalEvent.deltaX < 0) {
    console.log('left');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 style="white-space:nowrap;overflow:scroll">
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
</h1>

wheel event's Browser Compatibility on MDN's (2019-03-18):

Gujranwala answered 18/3, 2019 at 17:34 Comment(5)

Code above produces two console logs, use the following to fully separate out up/down/left/right:

if(e.originalEvent.deltaY > 0) {         console.log('down');     } else if(e.originalEvent.deltaY < 0) {         console.log('up');     } else if(e.originalEvent.deltaX > 0) {         console.log('right');     } else if(e.originalEvent.deltaX < 0) {         console.log('left');     }

– Lingo 19/3, 2019 at 0:30

For mobile use touchmove event instead. – Gujranwala 31/7, 2019 at 18:1

I checked the documentation, and when detecting the direction of a scroll, it explicitly states the following: "do not rely on the wheel event's delta* properties to get the scrolling direction. Instead, detect value changes of scrollLeft and scrollTop of the target in the scroll event." – Berneicebernelle 6/4, 2021 at 20:47

Appreciated @Bobort, I adjusted my answer based on that note. – Gujranwala 7/4, 2021 at 9:19

@DonWilson thank you! Just updated the answer with your suggestion. – Gujranwala 7/4, 2021 at 20:2

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.

Raskind answered 1/12, 2010 at 17:6 Comment(0)

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

Knox answered 4/11, 2014 at 18:31 Comment(2)

always returns down on android GS5 – Thermocline 11/9, 2016 at 17:5

This worked great! I had an issue with the top voted answer on IE. This does not have that issue! +1 from me. – Marvin 22/10, 2018 at 22:31

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

Vigilant answered 28/1, 2015 at 22:15 Comment(0)

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

Spearhead answered 11/9, 2016 at 20:43 Comment(0)

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

Lather answered 15/6, 2017 at 16:8 Comment(0)

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

Rubadub answered 2/10, 2018 at 13:54 Comment(2)

I tried your code and it's the other way. First one is triggered when scrolling down and second one when scrolling up. – Barrelchested 12/12, 2018 at 15:44

Hi :) Thanks AlexioVay. I edited my code (About time too!) ^^. Of course "console.log('.......')" it's just an exemple of what we can do. – Rubadub 1/7, 2019 at 14:18

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

Overtone answered 8/11, 2016 at 23:32 Comment(2)

Is jquery-wheel required to use the jquery version? – Racing 26/9, 2017 at 8:6

jquery-wheel is not required for this @HastigZusammenstellen – Overtone 26/9, 2017 at 16:39

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.

Andantino answered 11/3, 2017 at 23:13 Comment(1)

Seems to work fine in Chrome but not in FF (55.0.2, Ubuntu) – Racing 26/9, 2017 at 7:45

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

Boot answered 11/12, 2013 at 16:3 Comment(0)

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.

Robinet answered 26/9, 2018 at 0:44 Comment(1)

No "dir" attribute in Chrome 86.0.4240.111 – Unsound 23/10, 2020 at 14:45

You can use this as well

$(document).ready(function(){

  var currentscroll_position = $(window).scrollTop();
$(window).on('scroll', function(){
Get_page_scroll_direction();
});

function Get_page_scroll_direction(){
  var running_scroll_position = $(window).scrollTop();
  if(running_scroll_position > currentscroll_position) {
      
      $('.direction_value').text('Scrolling Down Scripts');

  } else {
       
       $('.direction_value').text('Scrolling Up Scripts');

  }
  currentscroll_position = running_scroll_position;
}

});

.direction_value{
  position: fixed;
  height: 30px;
  background-color: #333;
  color: #fff;
  text-align: center;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="direction_value">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>

Kennethkennett answered 15/6, 2019 at 11:30 Comment(0)

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(){ ...}
}

Boot answered 30/12, 2013 at 8:47 Comment(0)

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

Textbook answered 4/8, 2015 at 19:33 Comment(0)

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

});

Soapbox answered 21/10, 2015 at 16:24 Comment(0)

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

Blowbyblow answered 1/8, 2017 at 11:18 Comment(0)

I had problems with elastic scrolling (scroll bouncing, rubber-banding). Ignoring the down-scroll event if close to the page top worked for me.

var position = $(window).scrollTop();
$(window).scroll(function () {
    var scroll = $(window).scrollTop();
    var downScroll = scroll > position;
    var closeToTop = -120 < scroll && scroll < 120;
    if (downScroll && !closeToTop) {
        // scrolled down and not to close to top (to avoid Ipad elastic scroll-problems)
        $('.top-container').slideUp('fast');
        $('.main-header').addClass('padding-top');
    } else {
        // scrolled up
        $('.top-container').slideDown('fast');
        $('.main-header').removeClass('padding-top');
    }
    position = scroll;
});

Resonance answered 30/4, 2019 at 5:14 Comment(1)

What does the 120 mean? Perhaps use a const to better explain what the 120 is. – Berneicebernelle 6/4, 2021 at 20:50

This works in all pc or phones browsers, expanding on the top answers. One can build a more complex event object window["scroll_evt"] then call it in the handleScroll() function. This one triggers for 2 concurrent conditions, if certain delay has elapsed or certain delta is passed to eliminate some unwanted triggers.

window["scroll_evt"]={"delta":0,"delay":0,"direction":0,"time":Date.now(),"pos":$(window).scrollTop(),"min_delta":120,"min_delay":10};
$(window).scroll(function() {

    var currentScroll = $(this).scrollTop();
    var currentTime = Date.now();
    var boolRun=(window["scroll_evt"]["min_delay"]>0)?(Math.abs(currentTime - window["scroll_evt"]["time"])>window["scroll_evt"]["min_delay"]):false;
    boolRun = boolRun && ((window["scroll_evt"]["min_delta"]>0)?(Math.abs(currentScroll - window["scroll_evt"]["pos"])>window["scroll_evt"]["min_delta"]):false);
    if(boolRun){
        window["scroll_evt"]["delta"] = currentScroll - window["scroll_evt"]["pos"];
        window["scroll_evt"]["direction"] = window["scroll_evt"]["delta"]>0?'down':'up';
        window["scroll_evt"]["delay"] =currentTime - window["scroll_evt"]["time"];//in milisecs!!!
        window["scroll_evt"]["pos"] = currentScroll;
        window["scroll_evt"]["time"] = currentTime;
        handleScroll();
    }
});


function handleScroll(){
    event.stopPropagation();
    //alert(window["scroll_evt"]["direction"]);
    console.log(window["scroll_evt"]);
}

Poppo answered 2/7, 2019 at 13:31 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++