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

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

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

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

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

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

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

3 4
jquery jquery-animate

3 ответа:

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

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

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.
5

У меня была та же проблема, но я нашел решение прямо в документации 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;
})
1

Понял! После просмотра в Интернете я нашел что-то под названием 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;
})
-2