Как использовать IntersectionObserver для реализации бесконечного скролла?

Что такое IntersectionObserver и зачем он нужен

IntersectionObserver — это API браузера, который позволяет асинхронно наблюдать за пересечением целевого элемента с его родителем или областью просмотра. В контексте бесконечного скролла он заменяет дорогостоящие обработчики события scroll, которые вызываются сотни раз в секунду и могут тормозить интерфейс.

Как работает бесконечный скролл с IntersectionObserver

Основная идея: разместить в конце списка невидимый элемент-триггер (sentinel). Когда пользователь прокручивает до него, срабатывает колбэк наблюдателя, и вы загружаете следующую порцию данных. После загрузки триггер снова оказывается внизу, и процесс повторяется.

Пример реализации

// HTML: <div id="sentinel"></div>

const sentinel = document.getElementById('sentinel');
let page = 1;

const observer = new IntersectionObserver(async (entries) => {
  if (entries[0].isIntersecting) {
    const data = await fetch(`/api/items?page=${page}`);
    const items = await data.json();
    // Добавляем элементы в список
    items.forEach(item => {
      const div = document.createElement('div');
      div.textContent = item.name;
      document.body.insertBefore(div, sentinel);
    });
    page++;
  }
});

observer.observe(sentinel);

Важные детали

• Настройте порог срабатывания через опцию threshold (например, 0.1 для ранней подгрузки).
• Используйте rootMargin, чтобы начать загрузку до того, как триггер появится на экране.
• Не забывайте отключать наблюдателя, когда данные закончились, чтобы избежать лишних запросов.

Вывод

IntersectionObserver — это современный и производительный способ реализации бесконечного скролла. Он подходит для лент новостей, списков товаров и любых динамических списков, где важна плавность прокрутки и экономия ресурсов.