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

Answer 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
    }

});

Answer 2

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>

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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