How to determine scroll direction without actually scrolling

Question

I am coding a page where the first time the user scrolls, it doesn't actually scroll the page down, instead it adds a class with a transition. I'd like to detect when the user is scrolling down, because if he scrolls up, I want it to do something else. All the methods that I've found are based on defining the current body ScrollTop, and then comparing with the body scrollTop after the page scrolls, defining the direction, but since the page doesn't actually scroll, the body scrollTop() doesn't change.

animationIsDone = false;

function preventScroll(e) {

    e.preventDefault();
    e.stopPropagation();
}

$('body').on('mousewheel', function(e) {

    if (animationIsDone === false) {
        $("#main-header").removeClass("yellow-overlay").addClass("yellow-overlay-darker");
        $(".site-info").first().addClass("is-description-visible");
        preventScroll(e);

        setTimeout(function() {
            animationIsDone = true;
        }, 1000);

    }


});

This is what I have come with, but that way it doesn't matter the direction I scroll it triggers the event

note that `mousewheel` is deprecated and non-standard. Although only FireFox does not support it. To support FireFox, you can try handling the `DOMMouseScroll`, the equivalent of `e.wheelDelta` in `mousewheel` event handler is about `-40*e.detail` in `DOMMouseScroll` event handler. Also looks like jQuery removes the property, you have to access to the `originalEvent`. — King King, Jun 14 '14 at 06:21
you may use the **[wheel event](https://developer.mozilla.org/en-US/docs/Web/Events/wheel)**. Here you can check an example with cross-browser support, handling the scrolling: **[stackoverflow.com/questions/4989632...](http://stackoverflow.com/questions/4989632/differentiate-between-scroll-up-down-in-jquery/24792018#24792018)** — jherax, Jul 17 '14 at 03:22

score 147 · Accepted Answer · edited Sep 01 '19 at 00:54

147

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>

edited Sep 01 '19 at 00:54

John

1
13
98
177

answered Dec 08 '15 at 03:53

www139

4,960
3
31
56

6

Up-voted for answering a JavaScript question with actual JavaScript (instead of frameworks/library). – John Sep 01 '19 at 00:56
How can I `dispatchEvent` a scroll up or scroll down? – Shayan Dec 06 '19 at 14:59
4

Could this be made to also function on touch devices (detecting a swipe scroll attempt)? – Trever Thompson Mar 20 '20 at 13:29

cracker · Answer 2 · 2017-05-01T04:17:25.967

23

Try This using addEventListener.

window.addEventListener('mousewheel', function(e){
    wDelta = e.wheelDelta < 0 ? 'down' : 'up';
    console.log(wDelta);
});

Demo

Update:

As mentioned in one of the answers, the mousewheel event is depreciated. You should use the wheel event instead.

edited May 01 '17 at 04:17

answered Jun 14 '14 at 10:48

cracker

4,900
3
23
41

1

Thank you so much, worked like a charm. Here's a not shortened version just in case someone else need it (that way it my be difficult to read for beginners) – Daniel Ortiz Jun 14 '14 at 15:56
3

As mentioned in www139's answer, the `mousewheel` event is [depreciated](https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel). You should use the [`wheel` event](https://developer.mozilla.org/en-US/docs/Web/Events/wheel) instead (again, see www139's answer). – Apr 29 '17 at 17:12

score 4 · Answer 3 · answered Aug 09 '19 at 08:59

I know this post is from 5 years ago but I didn't see any good Jquery answer (the .on('mousewheel') doesn't work for me...)

Simple answer with jquery, and use window instead of body to be sure you are taking scroll event :

$(window).on('wheel', function(e) {
    var scroll = e.originalEvent.deltaY < 0 ? 'up' : 'down';
    console.log(scroll);
});

user3719477 · Answer 4 · 2014-06-14T06:22:53.297

Try using e.wheelDelta

var animationIsDone = false, scrollDirection = 0;

function preventScroll(e) {

    e.preventDefault();
    e.stopPropagation();
}

$('body').on('mousewheel', function(e) {

    if (e.wheelDelta >= 0) {
        console.log('Scroll up'); //your scroll data here
    }
    else {
        console.log('Scroll down'); //your scroll data here
    }
    if (animationIsDone === false) {
        $("#main-header").removeClass("yellow-overlay").addClass("yellow-overlay-darker");
        $(".site-info").first().addClass("is-description-visible");
        preventScroll(e);

        setTimeout(function() {
            animationIsDone = true;
        }, 1000);

    }


});

Note: remember that MouseWheel is deprecated and not supported in FireFox

Thank you really much..I will pay attention to the mousewheel problem =) — Daniel Ortiz, Jun 14 '14 at 15:57

score 2 · Answer 5 · answered Dec 17 '18 at 10:03

2

this one work in react app

<p onWheel={this.onMouseWheel}></p>

after add event listener, in function u can use deltaY To capture mouse Wheel

onMouseWheel = (e) => {
 e.deltaY > 0 
   ? console.log("Down")
   : console.log("up")
}

answered Dec 17 '18 at 10:03

S.Saderi

4,755
3
21
23

score 1 · Answer 6 · answered Jul 05 '18 at 13:09

1

Tested on chrome and

$('body').on('mousewheel', function(e) {

    if (e.originalEvent.deltaY >= 0) {
        console.log('Scroll up'); //your scroll data here
    }
    else {
        console.log('Scroll down'); //your scroll data here
    }

});

answered Jul 05 '18 at 13:09

Yoannes Geissler

791
1
9
18

How to determine scroll direction without actually scrolling

6 Answers6

Linked

Related