Saltar al contenido

Detectar si un evento de desplazamiento se activa manualmente en jQuery

Solución:

Quizás :animated selector te ayudará a:

$('#scroller').scroll(function(e) {
    if ($(this).is(':animated')) {
        console.log('scroll happen by animate');
    } else if (e.originalEvent) {
        // scroll happen manual scroll
        console.log('scroll happen manual scroll');
    } else {
        // scroll happen by call
        console.log('scroll happen by call');
    }
});

Manifestación

No sé qué tan bien funciona esto con dispositivos de pantalla táctil, pero esto funciona para mí en el escritorio al menos

$(window).on('mousewheel', function(){
    //code that will only fire on manual scroll input
});

$(window).scroll(function(){
    //code that will fire on both mouse scroll and code based scroll
});

No creo que haya una manera de apuntar solo al pergamino animado (la respuesta aceptada no funcionó para mí).

ACTUALIZACIÓN: ¡Advertencia!

Desafortunadamente, 'mousewheel' no parece captar a los usuarios que agarran manualmente la barra de desplazamiento y la arrastran o usuarios que usan los botones de flecha de la barra de desplazamiento 🙁

Esto todavía funciona bien para dispositivos con pantalla táctil, ya que sus deslizamientos parecen contar como desplazamientos del mouse. Sin embargo, esta no es una gran solución para los usuarios de escritorio.

Usando la respuesta aceptada de @ Tony y el comentario de @ DanielTonon, se me ocurrió la siguiente solución:

  var animatedScroll = false;
  var lastAnimatedScroll = false;
  $(window).scroll(function(event){
    lastAnimatedScroll = animatedScroll;
    animatedScroll = $('html, body').is(':animated');
  });

Esto parece resolver el problema mencionado por el cual jquery elimina el .is(':animated') luego se desplaza un píxel más, lo que conduce a .is(':animated') terminando en falso. Al almacenar la penúltima versión de .is(':animated') puede estar (más) seguro de si el pergamino era animado o no.

Cuando quiera saber si el pergamino fue animado o no, simplemente marque la casilla lastAnimatedScroll variable.

Esto NO ha sido probado a fondo por mí, pero ha sido correcto en muchas actualizaciones de página, por lo que asumiré que funciona lo suficientemente bien.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *