В чем плюсы и минусы слушания события OnScroll?

Прослушивание события `scroll` даёт контроль над реакцией на прокрутку, но при частом срабатывании бьёт по производительности, поэтому его дебаунсят/троттлят или заменяют на IntersectionObserver.

Плюсы

• Полный контроль — реагировать на позицию скролла (scrollY), направление, прогресс.
• Гибкость — параллакс, sticky-хедеры, индикаторы прогресса, «наверх».

window.addEventListener('scroll', () => {
  const progress = window.scrollY / document.body.scrollHeight;
});

Минусы

• Частое срабатывание — событие scroll вызывается очень часто (десятки раз в секунду), тяжёлый обработчик тормозит прокрутку (jank).
• Reflow — чтение геометрии (offsetTop, getBoundingClientRect) в обработчике вызывает принудительный layout.
• Блокировка главного потока — сложная логика на каждый скролл лагает.

Как оптимизировать

Throttle/debounce

Ограничить частоту вызова:

window.addEventListener('scroll', throttle(handler, 100));

requestAnimationFrame

Синхронизировать с кадрами:

let ticking = false;
window.addEventListener('scroll', () => {
  if (!ticking) {
    requestAnimationFrame(() => { update(); ticking = false; });
    ticking = true;
  }
});

passive listener

window.addEventListener('scroll', handler, { passive: true });

IntersectionObserver

Для «виден ли элемент» — лучше, чем scroll (не грузит поток).

Коротко для собеседования

Плюс onScroll — полный контроль над реакцией на прокрутку (параллакс, прогресс, sticky). Минус — частое срабатывание тормозит (jank), особенно с чтением геометрии (reflow). Оптимизируют throttle/debounce, requestAnimationFrame, passive: true; для видимости элементов — IntersectionObserver.