CODEWITHSUNDEEP
javascriptjqueryscroll
Daniel Ortiz
Daniel Ortiz

Reputation: 921

How to determine scroll direction without actually scrolling

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

Upvotes: 61

Views: 86116

Answers (6)

www139
www139

Reputation: 5227

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>

Upvotes: 156

NoxFly
NoxFly

Reputation: 308

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

Upvotes: 4

S.Saderi
S.Saderi

Reputation: 5533

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

Upvotes: 2

Yoannes Geissler
Yoannes Geissler

Reputation: 841

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
    }

});

Upvotes: 1

cracker
cracker

Reputation: 4906

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.

Upvotes: 23

user3719477
user3719477

Reputation: 110

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

Upvotes: 3

Related Questions