Позволить пользователю прокручивать анимацию jquery scrolltop?

Я хочу сделать так, чтобы веб-страница автоматически прокручивалась к определенному элементу, однако я не хочу, чтобы прокрутка позволяла бороться с пользовательским вводом. Если он начинает прокручиваться, а затем прокручивает пользователя, я хочу, чтобы автоматическая прокрутка остановить и позволить пользователю иметь полный контроль.

Поэтому я изначально думал, что могу сделать что-то вроде этого:

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

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

однако проблема заключается в том, что анимация scrollTop запускает обработчик событий прокрутки для окна! Итак, анимация начинается, а затем останавливается немедленно.

Я ищу способ, которым я могу заставить обработчик событий прокрутки окна останавливаться только в том случае, если он вызван пользовательским вводом... Возможно ли это?

Ответы

Ответ 1

Диодное решение для меня не сработало - scroll() не различал анимацию и пользователя, то есть анимация остановилась немедленно. Из разных сообщений для меня (изменено для этой цели) работает следующее:

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