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

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

    $( "section" ).click(function(e) {
        $('html,body').animate({ scrollTop: $(this).position().top }, 'slow');
        return false; 
    });

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

Ответ 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, поэтому некоторые другие ответы будут

Дополнительная информация:

Почему вы привязываетесь ко всем этим событиям? "прокрутить колесо мыши и т.д."

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

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

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

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

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

Ответ 2

Я бы сделал это, обнаружив события пользователя

$('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();
  }
});

Вот хороший учебник.

Ответ 3

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

ссылка stop

Ответ 4

Попробуйте это

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

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