> Как реализовать бесконечный скролл (JavaScript)

Бесконечный скролл реализуется через отслеживание пересечения контента с областью просмотра. Основной подход - использовать Intersection Observer API для элемента-триггера внизу списка.

Пример реализации на JavaScript:

JAVASCRIPT
class InfiniteScroll {
  constructor(container, loadMoreCallback) {
    this.container = container;
    this.loadMore = loadMoreCallback;
    this.observer = null;
    this.init();
  }

  init() {
    // Создаем элемент-триггер
    this.sentinel = document.createElement('div');
    this.sentinel.style.height = '1px';
    this.container.appendChild(this.sentinel);

    // Настраиваем Intersection Observer
    this.observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        this.loadMore();
      }
    }, { threshold: 0.1 });

    this.observer.observe(this.sentinel);
  }

  destroy() {
    if (this.observer) {
      this.observer.disconnect();
    }
  }
}

// Использование
const scrollContainer = document.getElementById('list');
const infiniteScroll = new InfiniteScroll(scrollContainer, async () => {
  const newItems = await fetchMoreData(); // ваша функция загрузки
  appendItems(newItems);
});

Ключевые моменты:

• IntersectionObserver эффективнее обработчиков scroll, так как не вызывает перерасчетов на каждом скролле.
• Элемент-триггер должен быть последним в списке.
• Важно добавить защиту от повторных вызовов (debounce) и обработку ошибок загрузки.
• Для обратной совместимости можно использовать полифил для IntersectionObserver.