0

Olá! Eu estou precisando arranjar uma maneira de dar toggle em uma classe na body quando faço uma grande rolagem na página (Ex: 1000px). Porém, o problema é o fato da minha página ser UMA tela completa com overflow: hidden. (Isso significa que não há rolagem e tudo acontece nesta tela).

Eu tentei o método óbvio:

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

O problema nesse caso, quando tento adicionar a classe endScroll após a rolagem de 1000px é como eu disse lá em cima, por conta da página ser um overflow: hidden, não há de fato uma rolagem que afaste do topo, então ele ignora a rolagem e nada acontece. (Para esclarecimento, quando o usuário rola, acontece uma animação na página).

Então eu tentei este método:

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

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

});

Embora ele funcione e adicione a classe, ele adiciona assim que o usuário rola uma única vez. Eu estou tendo dificuldades em fazer acontecer após os 1000px.

Obrigado desde já!

1 Resposta 1

0

Bom! Consegui resolver e já deixo aqui caso possa ajudar outra pessoa no futuro! Desta forma será possível reconhecer a rolagem do usuário mesmo que não haja uma rolagem real e a classe será adicionada e removida entre 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");
    }    
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .