Detectar si el usuario se desplaza

85

¿Cómo puedo detectar en javascript si el usuario se desplaza?

usuario1365010
fuente
No, quiero escribir desde otra función if(scolling). Es if(window.onscroll)lo mismo?
user1365010
Puede establecer scrollingen el onscroll. (PD: no, eso no es lo mismo)
Rocket Hazmat
3
El usuario nunca "se desplaza". Solo hay una acción de desplazamiento, no un estado de desplazamiento.
Kendall Frey
1
@ user1365010: ¡D'OH! No pensé en eso. ¿Qué estás tratando de hacer exactamente? ¿Por qué necesita saber si el usuario se desplaza?
Rocket Hazmat
2
Interesante. Nunca he 'reiniciado' un pergamino. ¿Cuidado para elaborar?
Kendall Frey

Respuestas:

87

esto funciona:

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

editar:

dijiste que esta es una función en un TimeInterval ..
Intenta hacerlo así:

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

luego, dentro de su intervalo, inserte esto:

if(userHasScrolled)
{
//do your code here
userHasScrolled = false;
}
Wampie Driessen
fuente
¡Pero es una función en un setInterval!
user1365010
4
@ user1365010: ¿Qué es? ¿De qué estás hablando? Necesita agregar más detalles a la pregunta.
Rocket Hazmat
6
@ user1365010 esta respuesta es (en esencia) lo mejor que puede hacer.
Matt Ball
#FYI, parece que no funciona cuando el contenedor se desplazaba, body.scroll () funciona, así que agregué ambos,
Selva Ganapathi
12

Acabas de decir javascript en tus etiquetas, por lo que la publicación de @Wampie Driessen podría ayudarte.

También quiero contribuir, por lo que puede usar lo siguiente cuando use jQuery si lo necesita.

 //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;
 });

Otro ejemplo:

$(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
fuente
2
¿No se supone que jQuery abstrae las diferencias del navegador? ¿Por qué tiene métodos para diferentes navegadores? ¿ $('#elem').bind('scroll'No es lo suficientemente bueno? EDITAR: No importa, vi tu segundo ejemplo.
Rocket Hazmat
1
nada de malo con un poco de javascript nativo de vez en cuando.
AGDM
¿No te refieres e.originalEvent.wheelDelta || e.originalEvent.detail?
JacobRossDev
2
ADVERTENCIA: Los eventos de rueda en esta respuesta no son estándar y están obsoletos. Utilice el wheelevento.
Alexander O'Mara
No lo he probado, pero según MDN DOMMouseScroll no es compatible con la mayoría de los 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
}

Cambie 500 a la cantidad de milisegundos después del último evento de desplazamiento en el que considera que el usuario "ya no se desplaza".

( addEventListeneres mejor que onScrollporque el primero puede coexistir muy bien con cualquier otro código que se use onScroll).

Silas S. Brown
fuente
0

Use un intervalo para verificar

Puede configurar un intervalo para seguir comprobando si el usuario se ha desplazado y luego hacer algo en consecuencia.

Tomando prestado del gran John Resig en su artículo .

Ejemplo:

    let didScroll = false;

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

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

Ver ejemplo en vivo

hitautodestruct
fuente