How to Determine the Direction of a Jquery Scroll Event

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

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

How to detect scroll direction

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

Detecting scroll direction

It can be detected by storing the previous scrollTop value and comparing the current scrollTop value with it.

JavaScript :

var lastScrollTop = 0;

// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
element.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
   var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
   if (st > lastScrollTop){
      // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);

How to determine scroll direction without actually scrolling

The mousewheel event is quickly becoming obsolete. You should use wheel event instead.

This would also easily allow you to the vertical and/or horizontal scroll direction without scroll bars.

This event has support in all current major browsers and should remain the standard far into the future.

Here is a demo:

window.addEventListener('wheel', function(event)

{

 if (event.deltaY < 0)

 {

  console.log('scrolling up');

  document.getElementById('status').textContent= 'scrolling up';

 }

 else if (event.deltaY > 0)

 {

  console.log('scrolling down');

  document.getElementById('status').textContent= 'scrolling down';

 }

});

<div id="status"></div>

Differentiate between scroll up/down in jquery?

Check for the last state. Something like this:

Keep a variable, say, last_scroll_position, and when you have a scroll, if last_scroll_position - current_position > 0, the user scrolled up, and down if it's less than 0.

How to detect scroll position of page using jQuery

You can extract the scroll position using jQuery's .scrollTop() method

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    // Do something
});

jQuery/JavaScript: Detecting scroll direction - code structure issue

$(window).bind('scroll', function() {

    var dir = detectDirection();
    console.log(dir);

});

You were calling detectDirection() twice during each scroll event. The first one detected the correct direction, but the second one just saw it in the same place, so it returned "up", and that's what you logged.

Detecting scroll direction - boolean variable wrong on first scroll change direction

Part of the problem is that you're hooking the scroll event every time anything scrolls, because you have this:

$( window ).on( "scroll", function() {
    scrollDirection();
});

...which calls scrollDirection every time there's any scrolling, and within scrollDirection you have this:

$(window).scroll(function(event) {
    // ...
});

...which adds another handler. Each time. After a relatively small amount of scrolling the page will become sluggish and ultimately non-responsive as all those event hanlders stack up.

Separately, since scrollDirection is called repeatedly, your lastScroll is updated before the inner handlers have a chance to work with it.

Just hook up a single handler, and remember the last scroll position:

var lastScroll = 0;
var down = false;
$(window).on("scroll", function() {
    var scroll = $(this).scrollTop();
    down = scroll > lastScroll;
    lastScroll = scroll;
});

Live Example:

(function() {

    var lastScroll = 0;

    var down = false;

    $(window).on("scroll", function() {

        var scroll = $(this).scrollTop();

        down = scroll > lastScroll;

        lastScroll = scroll;

        $("#indicator").text(down ? "down" : "up");

    });

})();

<div id="indicator" style="position: fixed; top: 0; left: 0; right: 0"><em>(No scroll yet)</em></div>

<div style="margin-top: 1.1em">

<div>

  scroll over this

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

  <br>.

</div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

jquery Scroll event in $(window), find out the position difference

Use scrollTop to determine what you're looking for.

---

Related Topics