Scroll Events & Intersection Observer

1. Introduction

In order to load assets lazily or build infinite scroll lists, you must be able to track when an element is visible on the screen. Historically, this required listening to scroll events and calculating element positions manually. Modern browsers provide the Intersection Observer API to handle element visibility changes efficiently.

2. Why It Matters

Scroll events trigger continuously as the page is scrolled, running on the main execution thread. Reading geometric properties (like getBoundingClientRect()) inside scroll listeners forces the browser to run synchronous layout calculations, which causes layout thrashing and slows down page performance. The Intersection Observer API runs asynchronously, avoiding these performance bottlenecks.

3. Real-World Analogy

Think of a Warehouse Guard monitoring shipping gates:

• Scroll Listeners (Constant Inspections): The guard runs down the hallways every 10 milliseconds to check if a shipping container has arrived at a gate. This constant running quickly exhausts the guard (blocks the main thread), even if no container arrives for hours.
• Intersection Observer (Automatic Gate Alarm): The guard installs an automated light sensor at the gate threshold. The guard sits at the desk reading reports. The moment a container breaks the light beam (enters the viewport), an alarm rings (callback fires) to notify the guard. The guard only reacts when the event occurs, saving energy.

4. The Intersection Observer API

The Intersection Observer API registers a callback to run whenever a target element intersects (crosses) another element or the browser viewport:

5. Practical Example

This script demonstrates implementing lazy loading for images, swapping the placeholder src attribute only when the image enters the viewport:

6. Common Mistakes

• Running heavy layout calculations inside scroll listeners: Reading properties like element.offsetTop inside scroll listeners causes layout thrashing. If you must use scroll listeners, always wrap the callback in a throttle or debounce utility, or use requestAnimationFrame to batch the calculations.
• Forgetting to call unobserve: Forgetting to call unobserve() when an element is no longer needed (like a lazy loaded image that has already finished loading) keeps the observer in memory, wasting resources.

7. Quick Quiz

8. Scenario-Based Challenge

9. Debugging Exercise

const sentinel = document.getElementById('sentinel');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Objective: Fetch next page of data
      loadNextPage(); // appends items, but sentinel remains at the bottom viewport!
    }
  });
});
observer.observe(sentinel);

const observer = new IntersectionObserver((entries) => {
  entries.forEach(async (entry) => {
    if (entry.isIntersecting) {
      observer.unobserve(sentinel); // Stop observing during load
      await loadNextPage(); // Wait for data to load and render
      observer.observe(sentinel); // Resume observation
    }
  });
});

10. Interview Questions

11. Production Considerations

• • Cleanup Observers: When building components in frameworks like React, always call observer.disconnect() inside the component teardown lifecycle (like the useEffect cleanup return) to remove all target element observations and prevent memory leaks.