Number of Pixels Rolled on a Hidden Overflow Page

Question

Hello! I’m in need of finding a way to toggle in a class on body when I do a large scrolling on the page (Ex: 1000px). However, the problem is that my page is A full screen with overflow: hidden. (That means there is no scrolling and everything happens on this screen).

I tried the obvious method:

if ($(window).scrollTop() > 1000){
    $('body').addClass( "endScroll");
}
else {
    $('body').removeClass("endScroll");
}

The problem in this case, when I try to add the class endScroll after scrolling 1000px is like I said up there, on account of the page being a overflow: hidden, There’s actually no scrolling that moves away from the top, so it ignores the scrolling and nothing happens. (For clarification, when the user scrolls, an animation happens on the page).

So I tried this method:

$(document).bind('mousewheel', function(e) {
    var delta = e.originalEvent.wheelDelta;

    if (delta < 0) {
        $('body').addClass("endScroll");
    } else if (delta > 0) {
        $('body').removeClass("endScroll");
    }

});

Although it works and adds the class, it adds as soon as the user rolls once. I’m having trouble making it happen after the 1000px.

Thanks in advance!

Answer 1

Good! I managed to solve and I leave here in case I can help someone else in the future! This way it will be possible to recognize the user’s scrolling even if there is no actual scrolling and the class will be added and removed between 1000px.

var scrollVal = 0;
$(document).bind('mousewheel', function(e) {
    scrollVal += e.originalEvent.wheelDelta;        
    if (scrollVal > 0) scrollVal = 0;     

    console.log(scrollVal);        
    if (scrollVal < -1000) {
        $('body').addClass( "endScroll");
    }else {
        $('body').removeClass("endScroll");
    }    
});