What is document.documentElement.scrollTop? This tells how much the user has already scrolled from the top. document.documentElement.scrollTop

Traditional Approach (Legacy)

Before modern APIs, developers used scroll events + calculations.

Logic: When user scrolls near the bottom → Load more data

Condition: window.innerHeight + document.documentElement.scrollTop >= document.documentElement.scrollHeight - 10 This means: Visible screen height + Scrolled amount = Total page height. If true → user reached bottom.

Example Implementation:

window.addEventListener("scroll", () => {
  const scrollTop = document.documentElement.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight;
  const clientHeight = window.innerHeight;

  if (scrollTop + clientHeight >= scrollHeight - 10) {
    console.log("Load more data...");
    // API call here
  }
});

Enter fullscreen mode Exit fullscreen mode

Problems with Traditional Approach:

• Performance Issues: Scroll event fires many times (very frequently). Can cause lag if not optimized.
• Manual Calculations: You have to calculate everything yourself.
• Needs Throttling/Debouncing: Otherwise too many API calls.

Modern Approach: Intersection Observer

The IntersectionObserver API detects when an element enters or exits the viewport (or a specified root container). It eliminates manual calculations and runs asynchronously.

Concept: Add a "sentinel" div at the bottom. When it becomes visible → Load more data.

Example Implementation:

const observer = new IntersectionObserver((entries) => {
  const entry = entries[0];

  if (entry.isIntersecting) {
    console.log("Load more data...");
    // API call here
  }
});

const target = document.querySelector("#load-more");
observer.observe(target);

Enter fullscreen mode Exit fullscreen mode

Architecture Decisions:

• Sentinel Placement: The sentinel must be the last child in the scroll container to guarantee it only triggers when all preceding content is rendered.
• Root Configuration: Defaults to the viewport. For nested scroll containers, explicitly set root: containerElement.
• Threshold & RootMargin: Use threshold: 0 with rootMargin: "100px" to prefetch data 100px before the sentinel enters the viewport, masking network latency.
• State Guard: Always pair the observer with an isLoading flag to prevent duplicate fetches during rapid intersection changes.

Pitfall Guide

1. Missing Sentinel Lifecycle Management: Failing to call observer.unobserve() or observer.disconnect() on component unmount or when pagination ends causes memory leaks and phantom API calls.
2. Race Conditions & Duplicate Fetches: Not implementing a loading guard (if (isLoading) return;) leads to multiple simultaneous requests when the sentinel briefly intersects multiple times or during scroll momentum.
3. Improper rootMargin Configuration: Setting rootMargin too small causes late triggers; too large causes premature fetching and wasted bandwidth. Best practice: rootMargin: "100px" or dynamic based on average item height.
4. Ignoring Container vs. Viewport Scrolling: IntersectionObserver defaults to the viewport. If scrolling occurs inside a specific container (e.g., a modal or sidebar), root must be explicitly set to that container element, otherwise the observer never triggers.
5. Layout Shift from Dynamic Injection: Appending new content without preserving scroll position or using virtualization causes jank. Maintain scroll offset tracking or use scrollIntoView({ block: "nearest" }) carefully to avoid jumping.
6. Throttling/Debouncing Misconfiguration (Traditional): Using setTimeout-based throttle incorrectly or setting debounce too high results in missed triggers or delayed data loading. Always pair with requestAnimationFrame if falling back to scroll events.
7. Browser Support & Polyfill Gaps: While IntersectionObserver is widely supported, legacy environments (IE11, older mobile browsers) require polyfills. Failing to include one or implement a graceful fallback breaks functionality for a subset of users.

Deliverables

• Blueprint: Infinite Scroll Architecture Blueprint – A structured guide covering sentinel placement strategies, state machine design (idle/loading/error/complete), pagination cursor management, and API prefetching patterns.
• Checklist: Pre-Deployment Validation Checklist – 12-point verification covering observer cleanup, loading guards, rootMargin tuning, error boundaries, accessibility (ARIA live regions), and performance profiling thresholds.
• Configuration Templates: Ready-to-use IntersectionObserver config objects, framework-agnostic composable wrappers (React/Vue/Vanilla), and fallback scroll-event throttle templates with requestAnimationFrame integration.