88

Como posso detectar em javascript se o usuário está rolando?

javascript

— user1365010
fonte

Não, eu quero de outra função para escrever if(scolling). É if(window.onscroll)o mesmo?

— user1365010

Você pode definir scrollingno onscroll. (ps: não, não é o mesmo)

— Foguete Hazmat de

3

O usuário nunca 'está rolando'. Existe apenas uma ação de rolagem, não um estado de rolagem.

— Kendall Frey

1

@ user1365010: D'OH! Eu não pensei nisso. O que exatamente você está tentando fazer? Por que você precisa saber se o usuário está rolando?

— Foguete Hazmat de

2

Interessante. Eu nunca 'reiniciei' um pergaminho. Cuidado ao elaborar?

— Kendall Frey

88

isso funciona:

window.onscroll = function (e) {  
// called when the window is scrolled.  
}

editar:

você disse que esta é uma função em um TimeInterval.
Tente fazer assim:

userHasScrolled = false;
window.onscroll = function (e)
{
    userHasScrolled = true;
}

então, dentro do seu intervalo, insira o seguinte:

if(userHasScrolled)
{
//do your code here
userHasScrolled = false;
}

— Wampie Driessen
fonte

Mas é uma função em um setInterval!

— user1365010

4

@ user1365010: O que é? Do que você está falando? Você precisa adicionar mais detalhes à pergunta.

— Foguete Hazmat de

6

@ user1365010 esta resposta é (em sua essência) o melhor que você pode fazer.

— Matt Ball

#FYI, parece que não está funcionando quando o contêiner estava rolando, body.scroll () funciona, então eu adicionei ambos,

— Selva Ganapathi

11

Você acabou de dizer javascript em suas tags, então a postagem de @Wampie Driessen pode ajudá-lo.

Eu também quero contribuir, então você pode usar o seguinte ao usar jQuery, se precisar.

 //Firefox
 $('#elem').bind('DOMMouseScroll', function(e){
     if(e.detail > 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

 //IE, Opera, Safari
 $('#elem').bind('mousewheel', function(e){
     if(e.wheelDelta< 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

Outro exemplo:

$(function(){
    var _top = $(window).scrollTop();
    var _direction;
    $(window).scroll(function(){
        var _cur_top = $(window).scrollTop();
        if(_top < _cur_top)
        {
            _direction = 'down';
        }
        else
        {
            _direction = 'up';
        }
        _top = _cur_top;
        console.log(_direction);
    });
});

— Oscar Jara
fonte

2

O jQuery não deveria abstrair as diferenças do navegador? Por que você tem métodos para navegadores diferentes? Não $('#elem').bind('scroll'é bom o suficiente? EDIT: Não importa, eu vi seu segundo exemplo.

— Rocket Hazmat

1

nada de errado com um pouco de javascript nativo de vez em quando.

— AGDM de

Você não quer dizer e.originalEvent.wheelDelta || e.originalEvent.detail?

— JacobRossDev

2

AVISO: os eventos de roda nesta resposta não são padrão e estão obsoletos. Use o wheelevento.

— Alexander O'Mara

Eu não testei isso, mas de acordo com MDN DOMMouseScroll não é compatível com a maioria dos navegadores developer.mozilla.org/en-US/docs/Web/Events/DOMMouseScroll

— Liron Yahdav

6

window.addEventListener("scroll",function(){
    window.lastScrollTime = new Date().getTime()
});
function is_scrolling() {
    return window.lastScrollTime && new Date().getTime() < window.lastScrollTime + 500
}

Altere 500 para o número de milissegundos após o último evento de rolagem no qual você considera que o usuário "não está mais rolando".

( addEventListeneré melhor do que onScrollporque o anterior pode coexistir bem com qualquer outro código que use onScroll.)

— Silas S. Brown
fonte

0

Use um intervalo para verificar

Você pode configurar um intervalo para continuar verificando se o usuário rolou a página e fazer algo de acordo.

Pegando emprestado do grande John Resig em seu artigo .

Exemplo:

    let didScroll = false;

    window.onscroll = () => didScroll = true;

    setInterval(() => {
        if ( didScroll ) {
            didScroll = false;
            console.log('Someone scrolled me!')
        }
    }, 250);

Veja o exemplo ao vivo

— hitautodestruct
fonte

Detectar se o usuário está rolando

Use um intervalo para verificar