laisser l'utilisateur défiler arrêter l'animation jquery de scrolltop?

Question

Je veux faire en sorte qu'une page web se déplace automatiquement à un certain élément, mais je ne veux pas le défilement pour lutter contre la saisie de l'utilisateur, Si elle commence à défiler et puis, l'utilisateur fait défiler, je veux que le système automatisé de défilement de l'arrêter et de laisser à l'utilisateur d'avoir un contrôle total.

Donc j'ai d'abord pensé que je pourrais faire quelque chose comme ceci:

var animatable = $('body, html');
animatable.animate({scrollTop: $('#foo').offset()}, 1000);

$(window).scroll(function() { animatable.stop(); });

cependant, le problème, c'est-- à l'animation de la scrollTop déclenche l'événement scroll gestionnaire de fenêtre! Ainsi, l'animation commence puis s'arrête immédiatement.

Je suis à la recherche d'une manière que je peux faire de mon de défilement de la fenêtre du gestionnaire d'événement ne s'arrêtera que si elle est déclenchée par l'utilisateur... Est-ce possible?

Answer 1

La solution de Diode n'a pas fonctionné pour moi - scroll () n'a pas fait de différence entre l'animation et l'utilisateur, ce qui signifie que l'animation s'est arrêtée immédiatement. À partir d'un autre poste , les travaux suivants pour moi (modifiés à cet effet):

 // Assign the HTML, Body as a variable...
var $viewport = $('html, body');

// Some event to trigger the scroll animation (with a nice ease - requires easing plugin )...
$('#element').click(function() {
    $viewport.animate({ 
        scrollTop: scrollTarget // set scrollTarget to your desired position
    }, 1700, "easeOutQuint");
});

// Stop the animation if the user scrolls. Defaults on .stop() should be fine
$viewport.bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
    if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
         $viewport.stop().unbind('scroll mousedown DOMMouseScroll mousewheel keyup'); // This identifies the scroll as a user action, stops the animation, then unbinds the event straight after (optional)
    }
});