¿Cómo distinguir el desplazamiento por el mouse del desplazamiento programático en JavaScript?

Question

Estoy Desplazamiento un contenido de DIV desbordante cambiando la propiedad scrollLeft en Javascript:

setInterval(function(){ 
    $('#scrollbox').scrollLeft($('#scrollbox').scrollLeft()+1); 
}, 50); 

Sin embargo, quiero dejar esto tan pronto como el usuario se desplaza el contenido ellos mismos, utilizando el ratón. Traté de detectar esto usando el evento scroll

$('#scrollbox').scroll(function(){...}); 

Sin embargo, mi desplazamiento automático arriba también desencadena ese evento. ¿Cómo puedo distinguir esto y solo reaccionar al desplazamiento iniciado por el usuario? (O: ¿cómo puedo dejar el código anterior de disparar un evento de desplazamiento Eso también hacer el truco?)

Answer 1

podría utilizar el .hover(): función para detener el desplazamiento cuando el ratón está sobre el elemento scrollbox:

http://jsfiddle.net/bGHAH/1/

setInterval(function(){ 
    if(!mouseover) 
    { 
     $('#scrollbox').scrollLeft($('#scrollbox').scrollLeft()+1); 
    } 
}, 50); 

var mouseover = false; 
$('#scrollbox').hover(function(){ 
    mouseover = true; 
},function(){ 
    mouseover = false;  
}); 

---

Editar

Basado en su com he logrado encontrar un plugin jquery del siguiente sitio: special scroll events for jquery.

Este complemento contiene un evento que intenta determinar si la función de desplazamiento se ha detenido en función del período de tiempo transcurrido entre el último paso de desplazamiento y la hora en que se realizó la verificación.

Para que esto funcione, necesitaba reducir la velocidad de su intervalo a un poco más de la latencia utilizada por el complemento, que resultó ser de 310 milisegundos. Hacer esto significaba que tenía que aumentar el paso de desplazamiento para mantenerlo visiblemente en movimiento.

Aquí está el enlace:

http://jsfiddle.net/EWACn/1/

y aquí está el código:

var stopAutoScroll = false; 

$(document).ready(function(){ 

setInterval(function(){ 
    if(!stopAutoScroll) 
    { 
     $('#status').html('scrolling'); 
     $('#scrollbox').scrollLeft($('#scrollbox').scrollLeft()+10); 
    }else{ 
     $('#status').html('not scrolling'); 
    } 
}, 310); 

$('#scrollbox').bind('scrollstart', function(e){ 
    stopAutoScroll = true; 
}); 

$('#scrollbox').bind('scrollstop', function(e){ 
    stopAutoScroll = false; 
}); 

}); 

Espero que esto ayude.

Answer 2

Para FF (Mozilla):

document.addEventListener('DOMMouseScroll', handler, false);

Para IE, Opera y Chrome:

document.onmousewheel = handler;

Answer 3

Otra opción es tener una bandera externa que se puede establecer antes de la desplazamiento programático, y luego restablecer los términos posteriores. Si el evento de desplazamiento se activa y este indicador no está configurado, usted sabe que el usuario es responsable y puede actuar en consecuencia.

Desafortunadamente, aunque es independiente del navegador y es fácil de leer, podría hacer creer que algunos rollos de usuario son programáticos. Sin embargo, creo que las ocurrencias de esto son pequeñas y pueden valer la pena dependiendo de la aplicación que está escribiendo.

Answer 4

Trate wheel event, para la mayoría de los navegadores modernos

El evento de la rueda se activa cuando se hace girar un botón de la rueda de un dispositivo señalador (normalmente un ratón).