Прокрутка веб-страницы является событием DOM. Можно в любой момент узнать как далеко прокрутилось окно с помощью window.scrollY. Легко прослушать это событие и получить нужное число:
window.addEventListener('scroll', () => {
console.log(window.scrollY)
});
Допустим, нам нужно знать, прокрутил ли пользователь вниз 100 пикселей или больше. Это можно сделать, задав условие window.Y > 100. Выведем в консоль оба результата:
window.addEventListener('scroll', () => {
if (window.scrollY < 100) {
console.log('Прокручено менее 100px');
} else {
console.log('Прокручено 100px');
}
});
Однако такой подход - это своего рода антипаттерн. Да, это просто и понятно, ещё и работает, но выполнять задачу таким способом - плохая идея. Она плохая из-за того, как часто срабатывает скрипт. Когда пользователь прокручивает страницу вниз, скрипт запускается десятки, сотни или тысячи раз. Получается, каждый раз, когда выполняется нужное нам условие, мы должны выполнять некоторый JavaScript в исключительно важном единственном потоке JavaScript. Это означает, что большое количество времени и ресурсов будет уделено прокрутке, а не другим важным вещам.
Есть способы сделать данное поведение менее интенсивным, и, естественно, это очень хорошая идея. Throttling и Debouncing - хорошие паттерны в JavaScript для повышения производительности. Они немного отличаются, но суть в том, что они предотвращают выполнение больших кусков JavaScript до тех пор, пока вы этого не захотите.
Но есть способ лучше.
Существует еще одна встроенная функция браузера, называемая IntersectionObserver, которая позволяет вам наблюдать за элементом и выполнять JavaScript только тогда, когда происходят важные события, например, когда он входит в область просмотра (вьюпорт) или покидает ее.
Итак, вот способ - мы размещаем на странице элемент размером 1 × 1 пиксель и следим за ним. Вот место размещения:
<div id="pixel-to-watch"></div>
#pixel-to-watch {
position: absolute;
width: 1px;
height: 1px;
top: 100px;
left: 0;
}
А вот как мы следим за ним:
let observer = new IntersectionObserver(entries => {
console.log(entries);
if (entries[0].boundingClientRect.y < 0) {
console.log('Прокручено 100px');
} else {
console.log('Прокручено менее 100px');
}
});
observer.observe(document.querySelector('#pixel-to-watch'));
Комментарии (1)