85

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

javascript

— 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

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

Detectar si el usuario se desplaza

Use un intervalo para verificar