deja que el desplazamiento del usuario detenga la animación jquery de scrolltop?

Question

Quiero hacer que una página web se desplace automáticamente a un elemento determinado; sin embargo, no quiero que el desplazamiento combata la entrada del usuario-- Si comienza a desplazarse y luego el usuario se desplaza, quiero que el desplazamiento automático se detenga y deja que el usuario tenga control total.

Así que originalmente se pensó que podía hacer algo como esto: sin embargo

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

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

, el problema es-- la animación de la scrollTop desencadena el controlador de eventos de desplazamiento de la ventana! Entonces, la animación comienza y luego se detiene de inmediato.

Estoy buscando una manera en la que pueda hacer que mi manejador de eventos de desplazamiento de ventana solo se detenga si se activa por la entrada del usuario ... ¿Es esto posible?

Answer 1

La solución de Diode no funcionó para mí - scroll() no distinguía entre la animación y el usuario, lo que significa que la animación se detuvo inmediatamente. Desde un different post, las siguientes obras para mí (modificados para este propósito):

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