Вызов Прокрутка только при прокрутке пользователя, а не при анимации()

Question

У меня есть несколько ссылок на странице с целью «перейти на верх», что достигается прокруткой страницы вверху с приятной анимацией. Я заметил, что иногда, пока страница прокручивается, пользователь, например, захочет прокрутить назад, но это невозможно. Экран будет только заикаться, но будет продолжать анимацию, пока не достигнет вершины.

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

$('#gototop').click(function() { 
    $('body').animate({scrollTop:0},3000); 
    $(window).scroll(function() { 
     $('body').stop(); 
}); 
    return false; 
}) 

Этот код является проблематичным, так как одушевленных() подсчитывает как скроллинг, поэтому только движется крошечное бит до того, как он остановится.

Я также попробовал key-down в качестве опции, но прокрутка мыши не регистрируется в качестве ключа.

Можно ли вызвать функцию прокрутки, когда пользователь свитки, а не animate()?

Answer 1

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

Например: (непроверенная)

var scrollAnimating = false 
jQuery.fx.step.scrollTop = function(E) { 
    scrollAnimating = true; 
    E.elem.scrollTop = E.now; 
    scrollAnimating = false; 
}; 

$('#gototop').click(function() { 
    $('body').animate({scrollTop:0},3000); 
    $(window).scroll(function() { 
     if (!scrollAnimating) 
      $('body').stop(); 
    }); 
    return false; 
}) 

Вы можете сделать то же самое для scrollLeft.

Обратите внимание, что я предполагаю, что установка scrollTop является повторным вызовом, так что событие scroll запускается внутри линии E.elem.scrollTop = E.now. Если он не реентерабелен (это может быть только в некоторых браузерах), событие будет запущено после того, как scrollAnimating вернется к false. Чтобы исправить это, вы можете сбросить scrollAnimating внутри события scroll.

Answer 2

Выяснил это! Осмотревся в Интернете, я нашел что-то под названием Document.addEventListener для Mozilla и document.onmousewheel для IE и Opera, которые будут захватывать прокрутки событий.

$('#gototop').click(function() { 
    $('body').animate({scrollTop:0},3000); 

    if(window.addEventListener) document.addEventListener('DOMMouseScroll', stopScroll, false); 
    document.onmousewheel = stopScroll; 

    function stopScroll() {$('body').stop()}; 

    return false; 
}) 

Answer 3

У меня была такая же проблема, но я нашел решение прямо на документации jQuery. В анимационном методе есть свойство, позволяющее установить функцию обратного вызова после завершения анимации.

http://api.jquery.com/animate/#animate-properties-duration-easing-complete

Вот код:

$('#gototop').click(function() { 

    //This will help you to check 
    var animationIsFinished = false; 

    $('body').animate({scrollTop:0},3000,"swing",function(){ 

     //this function is called when animation is completed 
     animationIsFinished = true; 

    }); 
    $(window).scroll(function() { 
     //Check if animation is completed 
     if (!animationIsFinished){ 
      $('body').stop(); 
     } 
    }); 
    return false; 
})