Detectar se o usuário está rolando

88

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

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

Respostas:

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