Come distinguere lo scorrimento del mouse dallo scorrimento programmatico in JavaScript?

Question

faccio scorrere un contenuto traboccante di DIV modificando la proprietà scrollLeft in Javascript:

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

Tuttavia, voglio fermare questo, non appena l'utente scorre il contenuto se stessi, utilizzando il mouse. Ho provato a rilevare questo utilizzando l'evento scroll

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

tuttavia, il mio scorrimento automatico sopra attiva anche quell'evento. Come posso distinguere questo e reagire solo allo scorrimento avviato dall'utente? (Oppure: come posso fermare il codice di cui sopra da sparare un evento di scorrimento Questo sarebbe anche fare il trucco?)

Answer 1

è possibile utilizzare il .hover(): la funzione per fermare lo scorrimento quando il mouse si trova sopra l'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;  
}); 

---

Modifica

sulla base della sua com Sono riuscito a trovare un plugin jQuery dal seguente sito: special scroll events for jquery.

Questo plug-in contiene un evento che tenta di determinare se lo scorrimento si è interrotto in base al periodo di tempo trascorso tra l'ultimo passaggio di scorrimento e il momento in cui è stato effettuato il controllo.

Per far funzionare tutto questo ho dovuto rallentare l'intervallo fino a poco più della latenza utilizzata dal plug-in che ha funzionato per essere di 310 millisecondi. Facendo questo significava che dovevo aumentare la procedura di scorrimento per mantenerlo visibilmente in movimento.

Ecco il link:

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

e qui è il codice:

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

}); 

Spero che questo aiuti.

Answer 2

Per FF (Mozilla):

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

Per IE, Opera e Chrome:

document.onmousewheel = handler;

Answer 3

Un'altra opzione è quella di avere una bandiera esterna che è possibile impostare prima della scorrimento programmatico, quindi reimpostare afterwords. Se viene attivato l'evento di scorrimento e questo flag non è impostato, l'utente è responsabile e può agire di conseguenza.

Sfortunatamente anche se questo è indipendente dal browser e facile da leggere, potrebbe farti credere che alcuni pergamene dell'utente siano programmatici. Comunque penserei che l'occorrenza di questo è piccola e può valerne la pena a seconda dell'app che stai scrivendo.

Answer 4

Prova wheel event, per la maggior parte dei browser moderni

L'evento ruota viene attivato quando si ruota una rotellina di un dispositivo di puntamento (normalmente il mouse).