Como posso detectar em javascript se o usuário está rolando?
javascript
user1365010
fonte
fonte
if(scolling)
. Éif(window.onscroll)
o mesmo?scrolling
noonscroll
. (ps: não, não é o mesmo)Respostas:
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; }
fonte
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); }); });
fonte
$('#elem').bind('scroll'
é bom o suficiente? EDIT: Não importa, eu vi seu segundo exemplo.e.originalEvent.wheelDelta || e.originalEvent.detail
?wheel
evento.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 queonScroll
porque o anterior pode coexistir bem com qualquer outro código que useonScroll
.)fonte
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
fonte