JQuery .animate() остановить прокрутку при прокрутке пользователя вручную?

Question

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

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

Answer 1

Изменить вашу функцию к этому:

var page = $("html, body"); 

$("section").click(function(e) { 

    page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){ 
     page.stop(); 
    }); 

    page.animate({ scrollTop: $(this).position().top }, 'slow', function(){ 
     page.off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove"); 
    }); 

    return false; 
}); 

Это будет:

• Остановить анимацию, если пользователь прокручивает вручную (только во время анимации)
• не мешает вашей нормальной JQuery анимации, например некоторые другие ответы были бы

---

Некоторые дополнительная информация:

Почему вы обязательными для всех этих событий? "scroll mousewheel и т. д."

Существует много разных типов событий прокрутки. Вы можете прокручивать вниз с помощью мыши, клавиатуры, сенсорного экрана и т. Д. При этом мы обязательно поймаем все из них.

Что такое var page = $("html, body");? Могу я просто использовать $("html, body") всюду?

Если вы используете один и тот же селектор более одного раза, целесообразно кэшировать их в variable. Будет легче писать/использовать и иметь лучшую производительность, чем при каждом повторном вычислении селектора.

Где я могу найти дополнительную информацию об .animate() и .stop()?

Вы можете прочитать документацию jQuery для .animate() и .stop(). Я также рекомендую прочитать около animation queue's, так как .stop() работает по этому принципу.

Answer 2

$("your selector").scroll(function(){ 
$('html,body').stop(); 
}); 

ссылка stop

Answer 3

Попробуйте

$('html,body').scroll(function() { 
    $(this).stop(true, false); 
}); 

Он также удалит все другие анимации из очереди элемента, но это не будет «прыгать» до конца текущей анимации прокрутки.

Answer 4

Я хотел бы сделать это с помощью регистрирующих пользовательских событий

$('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove', function (e) { 
    if (e.which > 0 || e.type == "mousedown" || e.type == "mousewheel" || e.type == "touchmove") { 
    $("html,body").stop(); 
    } 
}); 

Вот a good tutorial.