Как остановить автоматический скролл (jQuery-анимацию) ручным?

Question

[Эмиль Валеев]

Задача: автоматически прокручивать страницу до конца блока, когда пользователь до этого блока добирается вручную, но останавливать анимацию, если пользователь начал скролл вручную.

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

Проблема: 1) анимация не останавливается 2) Работает только скролл мышью, любой другой возвращается к последнему elBottom

(Дополнительно) - можно ли реализовать решение проще, чем через цикл внутри каждого onscroll? Влияет ли текущая реализация на производительность, так, чтобы это было заметно?

var $page = $('html, body'),
        arr = document.getElementById('pagesUl').getElementsByClassName('odd');

    window.onscroll = function() {
        var currentScroll = window.pageYOffset || document.documentElement.scrollTop;

        for (var i = 0; i <= arr.length - 1; i++) {
            var elTop = arr[i].getBoundingClientRect().top + pageYOffset,
                elBottom = arr[i].getBoundingClientRect().bottom + pageYOffset;

            if (currentScroll >= elTop && currentScroll < elBottom && i != 2) { 

                $page.animate({
                    scrollTop: elBottom
                }, 2000, 'linear');

                $page.on('mousedown wheel DOMMouseScroll mousewheel keyup touchmove', function() {
                   $page.stop();
                });
                
                return false; 
            };
        };

    };

Answer 1

[Константин Громов]

У вас баг в самом описании функционала: когда человек прерывает автоматическую прокрутку своим вмешательством, он с большой вероятностью всё ещё будет находится внутри текущего блока и onscroll инициированный самим прерыванием анимации сразу же начнёт новую. Этого можно избежать, например, удаляя блок на котором произошло прерывание из перебора и возвращая его туда позже. Но подобные усложнения убивают красоту самого функционала, а если они неизбежны стоит пересмотреть саму идею.

Цикл внутри onscroll'а нужен в любом случае, да и времени он практически не занимает.