Вызывайте прокрутку только тогда, когда пользователь прокручивает, а не когда animate()

Question

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

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

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

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

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

Есть ли способ вызвать мою функцию прокрутки, когда пользователь прокрутки, а не 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

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

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

Answer 3

Догадаться!Покопавшись в Интернете, я нашел что-то под названием Document.addEventListener для Мозиллы и 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;
})