Как отловить событие прокрутки в JavaScript?

Событие прокрутки ловят методом `addEventListener('scroll', handler)` на прокручиваемом элементе или `window`/`document` для страницы. Часто с throttle/debounce и `{ passive: true }`.

Как ловить scroll

Для страницы

window.addEventListener('scroll', () => {
  console.log(window.scrollY); // позиция прокрутки
});

Для элемента с прокруткой

element.addEventListener('scroll', () => {
  console.log(element.scrollTop);
});

Нюансы

scroll срабатывает часто

Событие вызывается очень часто при прокрутке → тяжёлый обработчик тормозит. Оптимизируют:

#### Throttle/debounce

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

#### requestAnimationFrame

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

passive: true

Не блокировать прокрутку (для производительности):

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

scroll не всплывает (у элемента)

У элемента событие не всплывает — слушать на самом прокручиваемом элементе; для страницы — на window/document.

Альтернатива — IntersectionObserver

Для «виден ли элемент» (ленивая загрузка, бесконечный скролл) лучше IntersectionObserver — не грузит поток:

new IntersectionObserver(callback).observe(target);

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

Прокрутку ловят window.addEventListener('scroll', handler) (страница, window.scrollY) или на прокручиваемом элементе (element.scrollTop). scroll срабатывает часто — оптимизируют throttle/debounce, requestAnimationFrame, { passive: true }. Не всплывает у элемента. Для видимости элементов (ленивая загрузка, бесконечный скролл) лучше IntersectionObserver.