Call Scroll только тогда, когда пользователь прокручивает, а не когда animate () - PullRequest
Новая
       34

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

4 голосов
/ 02 ноября 2009

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

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

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

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

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

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

Ответы [ 3 ]

5 голосов
/ 02 ноября 2009

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

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

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.

1 голос
/ 13 января 2018

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

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