Каким кодом в JS определить, что пользователь скроллит страницу вверх или вниз, не создавая нагрузки на процессор?

Чтобы определить направление скролла (вверх или вниз) в JavaScript без создания лишней нагрузки на процессор, важно использовать несколько техник оптимизации: пассивные слушатели событий, throttle/debounce и requestAnimationFrame.

## Базовый подход с passive listener и throttle

Самый распространённый и эффективный способ — сохранять предыдущую позицию скролла и сравнивать её с текущей, при этом ограничивая частоту вызовов обработчика:

js
let lastScrollY = window.scrollY;
let ticking = false;

window.addEventListener(‘scroll’, () => {
if (!ticking) {
window.requestAnimationFrame(() => {
const currentScrollY = window.scrollY;
if (currentScrollY > lastScrollY) {
console.log(‘Скролл вниз’);
} else if (currentScrollY {
if (!entry.isIntersecting) {
console.log(‘Пользователь проскроллил мимо sentinel’);
}
});
observer.observe(sentinel);

## Альтернатива: throttle через setTimeout

Если нужен более классический throttle без привязки к кадрам:

js
let lastScrollY = window.scrollY;
let throttleTimer = null;

window.addEventListener(‘scroll’, () => {
if (throttleTimer) return;
throttleTimer = setTimeout(() => {
const currentScrollY = window.scrollY;
console.log(currentScrollY > lastScrollY ? ‘вниз’ : ‘вверх’);
lastScrollY = currentScrollY;
throttleTimer = null;
}, 100);
}, { passive: true });

## Итог

Оптимальный рецепт: `passive: true` + `requestAnimationFrame` с флагом `ticking`. Это минимизирует количество вычислений и не блокирует рендеринг страницы. Избегайте чтения `scrollY` напрямую в теле обработчика без rAF — это вызывает принудительный reflow и замедляет браузер.