How to Build Infinite Scroll in an Interview

How to Build Infinite Scroll in an Interview

Infinite scroll tests IntersectionObserver and lazy loading. Here is how to build it.

Requirements

• A list that loads more items as the user scrolls.
• Loading indicator while fetching.
• Stop when there is no more data.
• Efficient (no scroll event listeners).

Plan (5 minutes)

1. HTML: a list container + a sentinel element at the bottom.
2. State: current page, loading, hasMore.
3. Logic: IntersectionObserver on the sentinel.
4. API: simulate fetching data (or use a real API).

Build Core (40 minutes)

HTML

<div class="list" id="list"></div>
<div class="sentinel" id="sentinel">Loading...</div>

JavaScript

let page = 1;
let loading = false;
let hasMore = true;
const list = document.getElementById("list");
const sentinel = document.getElementById("sentinel");

async function fetchItems(pageNum) {
  // simulate API call
  return new Promise((resolve) => {
    setTimeout(() => {
      if (pageNum > 5) return resolve([]); // no more data after 5 pages
      const items = Array.from({ length: 10 }, (_, i) => `Item ${(pageNum - 1) * 10 + i + 1}`);
      resolve(items);
    }, 500);
  });
}

async function loadMore() {
  if (loading || !hasMore) return;
  loading = true;
  sentinel.textContent = "Loading...";

  const items = await fetchItems(page);
  if (items.length === 0) {
    hasMore = false;
    sentinel.textContent = "No more items";
    return;
  }

  items.forEach((item) => {
    const div = document.createElement("div");
    div.className = "item";
    div.textContent = item;
    list.appendChild(div);
  });

  page++;
  loading = false;
  sentinel.textContent = "Load more";
}

const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) loadMore();
}, { rootMargin: "100px" });

observer.observe(sentinel);
loadMore(); // initial load

CSS

.list { max-width: 500px; margin: 0 auto; }
.item { padding: 16px; border: 1px solid #ddd; margin: 4px 0; border-radius: 4px; }
.sentinel { text-align: center; padding: 20px; color: #666; }

Edge Cases (20 minutes)

• Prevent duplicate loading (loading flag).
• Stop when no more data (hasMore flag).
• rootMargin for pre-loading (load before the sentinel is visible).
• Error handling (retry on fetch failure).
• Cleanup (disconnect the observer when done).

The Takeaway

Build infinite scroll: HTML (list + sentinel), JavaScript (IntersectionObserver on the sentinel, fetch on intersect, loading/hasMore flags, append items), CSS (simple list styling). Use rootMargin for pre-loading. Handle edge cases (duplicate loading, no more data, errors, cleanup). This tests IntersectionObserver and lazy loading.