¿Cómo puedo detectar cuándo el usuario está desplazándose activamente?

Question

Mi página tiene un área desplazable que contiene una serie de elementos. Cada elemento activa una función cuando está sobrevolado.

Mi problema es que si el usuario se desplaza hacia arriba o hacia abajo con la rueda del mouse, la función se activa para cada elemento sobre el que pasa el cursor cuando el área se desplaza por debajo.

¿Hay alguna manera de que pueda tener la función de activación en vuelo estacionario solo si el usuario no está desplazándose activamente?

El .scroll() incorporado en jQuery no parece ser lo que necesito, ya que el evento de desplazamiento se activa solo cuando se inicia un desplazamiento. Necesito saber si el pergamino está "en progreso", por así decirlo.

---

ACTUALIZACIÓN: Aquí está mi código actual:

$container.find('div.item').each(function(i, e){ 
    $(e).hover(
      function(){ 
       $(this).toggleClass('expanded'); 
       // other functions here 
      }, 
      function(){ 
       $(this).toggleClass('expanded'); 
      } 
    ); 
}); 

Así que lo que quiero hacer es desactivar todo en .hover() si el usuario está actualmente desplaza la página.

Answer 1

me gustaría utilizar el setTimeout con un tiempo razonable en mouseenter y luego clearTimeout en mouseleave, lo que crearía un pequeño retraso en los elementos emergentes, por lo que el elemento emergente sólo daría lugar cuando el usuario mantiene su ratón sobre el elemento para el fijar tiempo.

Esto sería con suerte minimice su problema de desplazamiento. Puede haber una solución mejor que esta, pero fue lo primero que pensé.

EDITAR

escribió este ejemplo de forma rápida, debería funcionar bien:

$(function() { 
    "use strict"; 
    var $container = $("#container"), 
     timeout, self; 

    $container.find("div").each(function() { 
     $(this).hover(
      function() { 
       self = this; 
       timeout = setTimeout(function() { 
        $(self).css({ 
         width : 500, 
         height: 500 
        }); 
       }, 500); 
      }, 
      function() { 
       clearTimeout(timeout); 
       $(this).css({ 
        width : 300, 
        height: 300 
       }); 
      } 
     ); 
    }); 
}); 

Para una demostración vamos a este violín: http://jsfiddle.net/sQVe/tVRwm/1/

Todo depende de que la cantidad de un retraso que quiero, utilicé 500ms.

NOTA

El .each() no se necesita, se puede llamar a la .hover() en la colección div de inmediato. Incluí .each() porque no sé si quieres hacer algo más que simplemente enlazar el evento de desplazamiento.