Обнаруживать, когда прокрутка завершена при использовании "поведения прокрутки: плавное"

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

Я полагаю, что я могу подождать, пока не будет никаких событий прокрутки:

let timer;
window.addEventListener( 'scroll', () => {
    clearTimeout( timer );

    timer = setTimeout( () => {
        callback();
    }, 300 );
}, { passive: true } );

Есть лучший способ сделать это?

(2017-11-23). Соответствующее примечание, Firefox 58 теперь имеет событие scrollend только для scrollend.

Ответы

Ответ 1

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

var scrollElem = document.querySelector('.scroll-me'),
    offsetTop = 300;

window.addEventListener('scroll', () => {
    var viewportOffset = scrollElem.getBoundingClientRect(),
        distanceToTop = viewportOffset.top;

    if (distanceToTop <= offsetTop) {
        callback();
    }
});

Ответ 2

Вы должны использовать JQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(window).on("scroll", function() {
	var scrollHeight = $(document).height();
	var scrollPosition = $(window).height() + $(window).scrollTop();
	if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
	    // when scroll to bottom of the page
	}
});