Unterscheidung zwischen dem Benutzer Scrollen und programmgesteuert Scrollen mit Hilfe von Javascript

Question

Ich erstellen einen Scroll-Effekt mit JQuery und ich frage mich, ob es möglich ist, zwischen dem Benutzer Scrollen vs programmgesteuertem Scrollen zu unterscheiden.

Ich habe so etwas wie dies:

$('#element').on('scroll',function(e){ 
    $('#element').stop(true); // stop previous scrolling animation 
    $('#element').animate({ // start new scrolling animation (maybe different speed, different direction, etc) 
     scrollTop:... 
    }); 
}); 

jedoch dieses Ereignis bei jedem Schritt der Animation ausgelöst wird. Wie kann ich feststellen, ob dieses Ereignis vom Benutzer oder von der Animation ausgelöst wurde?

Answer 1

eine Variable verwenden, um zu bestimmen, wenn Sie programmatisch

Beispiel scrollen:

var programScrolling = false; 

$('#element').on('scroll',function(e){ 
    if (programScrolling) { 
     return; 
    } 

    $('#element').stop(true); // stop scrolling animation 

    programScrolling = true; 

    $('#element').animate({ 
     scrollTop:... 
    }); 

    programScrolling = false; 
}); 

Nicht sicher, ob das ist genau das, was Sie wollen, aber das Konzept funktionieren soll.

Answer 2

Ich würde vorschlagen möglicherweise die .originalEvent Methode zu verwenden. Der Nachteil ist, dass dies sehr Browserabhängig ist. Siehe here. Hoffentlich wird die folgenden hilft:

$('#element').scroll(function(e){ 
    var humanScroll = e.originalEvent === undefined; 
    if(humanScroll) { 
     $(this).stop(true); 
    } 
}) 

Answer 3

Ich würde Funktionen machen für verschiedene Arten von scrollings sie zu erfassen und ein Scroll-Handler für alle von ihnen zu nennen, etwa so:

JS Fiddle

$(window).bind('mousewheel DOMMouseScroll', function(event){ 
    var direction; 
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { 
     direction = 'up'; 
    } 
    else { 
     direction = 'down'; 
    } 
    scrollHandler(direction, 'mouseWheel'); 
    event.preventDefault(); 
}); 

var scrollHandler = function(direction, origin) { 
    var height = $(document).scrollTop(); 
    var movement = (direction == 'up') ? -100 : 100; 
    console.log(origin); 
    $('body').stop(true); 
    $('body').animate({ 
     scrollTop: height + movement 
    }, 250); 
}; 

Dann Sie können je nach Herkunft des Ereignisses verschiedene Dinge tun!
Sie können auch überprüfen, ob der Benutzer in dieselbe Richtung scrollt, in der der Bildschirm scrollt, und etwas anderes machen oder was auch immer Sie wollen mit den Informationen, die das Mausrad-Ereignis übergibt.

Original-Mausrad Event-Funktion von THIS Antwort kopiert