Number of Pixels Rolled on a Hidden Overflow Page

Question

Number of Pixels Rolled on a Hidden Overflow Page

Navigation

#1 by (0 votes)

0

Hello! I need to get a way to give toggle in a class in body when I make a big page scroll (Ex: 1000px). However, the problem is that my page is a complete screen with overflow: hidden . (This means that there is no scrolling and everything happens on this screen.)

I've 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 the 1000px scrolling is as I said up there, because the page is a overflow: hidden , there is not really a scroll that moves away from the top, so it ignores scrolling and nothing happens. (For clarity, when the user rolls, 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 difficulty making it happen after the 1000px.

Thank you in advance!

javascript html jquery css rolamento

asked by anonymous 13.03.2017 / 15:43

1 answer

Apache2 subdomain problem Angle POST for ASP.MVC

score 0 · Accepted Answer

Good! I was able to solve it and I'll leave it here if I can help someone else in the future! In this way it will be possible to recognize the scrolling of the user even if there is no real 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");
    }    
});