Що робить IntersectionObserver?

JavaScriptMiddle~2 хв читання

IntersectionObserver - це потужний вбудований API браузера, який дозволяє відстежувати, коли елемент потрапляє в область видимості (viewport) або виходить з неї - без важких обробників scroll.

Просте визначення

IntersectionObserver - це об'єкт, який "спостерігає" за елементом і повідомляє, коли він перетинається з областю перегляду (чи з іншим контейнером).

Це чудова альтернатива:

подіям scroll,
ручним перевіркам getBoundingClientRect(),
або обробникам window.onscroll, які сильно навантажують сторінку.

1. Простий приклад

javascript

<div style="height: 120vh;"></div>
<div id="target" style="height: 100px; background: coral;">Я ціль</div>
<div style="height: 120vh;"></div>

<script>
  const target = document.querySelector('#target');

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        console.log('Елемент з\'явився в зоні видимості!');
      } else {
        console.log('Елемент вийшов із зони видимості!');
      }
    });
  });

  observer.observe(target); // починаємо спостерігати
</script>

Коли ти прокрутиш сторінку і блок потрапить на екран, у консоль виведеться:

javascript

Елемент з'явився в зоні видимості!

2. Параметри конструктора

javascript

new IntersectionObserver(callback, options);

Параметр	Що робить
`callback`	Функція, яка викликається при кожному перетині
`options.root`	Контейнер, всередині якого відстежувати (за умовчанням - вікно браузера)
`options.rootMargin`	Відступи (наприклад `'0px 0px -100px 0px'`), як у CSS `margin`
`options.threshold`	Поріг спрацьовування - частка видимості елемента (від 0 до 1)

Приклад з налаштуваннями:

javascript

const observer = new IntersectionObserver(callback, {
  root: null, // вікно браузера
  rootMargin: '0px 0px -100px 0px', // спрацює трохи раніше
  threshold: 0.5 // коли видно 50% елемента
});

3. Об'єкт `entry` у колбеку

Кожен елемент, за яким стежить спостерігач, представлений об'єктом IntersectionObserverEntry:

javascript

entry.isIntersecting // true / false
entry.intersectionRatio // частка видимої частини (0-1)
entry.boundingClientRect // положення елемента
entry.rootBounds // межі області видимості
entry.target // сам елемент

4. Приклад: плавна поява елементів

javascript

const items = document.querySelectorAll('.fade');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
});

items.forEach(item => observer.observe(item));

javascript

.fade {
  opacity: 0;
  transform: translateY(20px);
  transition: 0.5s;
}
.fade.visible {
  opacity: 1;
  transform: translateY(0);
}

Елементи плавно "спливають", коли потрапляють на екран.

5. Приклад: лінива загрузка зображень

javascript

<img data-src="photo.jpg" alt="photo" width="400" height="300" />

javascript

const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      obs.unobserve(img); // перестаємо стежити за цією картинкою
    }
  });
});

images.forEach(img => observer.observe(img));

Тепер зображення завантажуються тільки тоді, коли стають видимими - це економить трафік і прискорює завантаження сайту.

6. Переваги перед обробниками `scroll`

Звичайний scroll	IntersectionObserver
Викликає подію на кожному пікселі	Працює асинхронно й ефективно
Потрібно вручну рахувати `getBoundingClientRect()`	Все робить сам
Навантаження на CPU	Майже нульове навантаження
Незручно з великою кількістю елементів	Спостерігач може стежити за сотнями елементів

7. Зупинка спостереження

Щоб перестати стежити за елементом:

javascript

observer.unobserve(target);

Щоб повністю відключити:

javascript

observer.disconnect();

Підсумок

Що робить	`IntersectionObserver`
Відстежує	Коли елемент входить або виходить з області видимості
Замінює	`onscroll` та `getBoundingClientRect()`
Використовується для	Лінивого завантаження, анімацій при скролі, відстеження реклами, аналітики
Продуктивність	Дуже висока (працює поза основним потоком JS)

Запам'ятай просто: IntersectionObserver - це "спостерігач за видимістю". Він повідомляє, коли елемент з'явився на екрані, і робить це ефективно, без зайвих подій scroll.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.