How To: Infinite Scroll with IntersectionObserver

« How To: HTML5 Drag & Drop File Upload« Previous How To: Skeleton Loading Screens »Next »

Implement smooth, high-performance infinite scrolling using the native IntersectionObserver API without scroll lag.

Why IntersectionObserver Beats onScroll Handlers

Attaching listeners to window.onscroll forces continuous calculations on the main thread, causing frame drops. The IntersectionObserver API offloads position detection directly to the browser compositor.

Sentinel-Based Infinite Loader

Try It Yourself »

const sentinel = document.getElementById('scroll-sentinel');
let page = 1;
let isLoading = false;

const observer = new IntersectionObserver(async (entries) => {
  const entry = entries[0];
  if (entry.isIntersecting && !isLoading) {
    isLoading = true;
    page++;
    await loadMoreItems(page);
    isLoading = false;
  }
}, { rootMargin: '200px' }); // Load 200px before user reaches the bottom

observer.observe(sentinel);

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Which property in IntersectionObserver options loads content slightly before the user reaches the sentinel element?

« Previous: How To: HTML5 Drag & Drop File Upload Next: How To: Skeleton Loading Screens »