What is the primary advantage of using Intersection Observer API over scroll event listeners with getBoundingClientRect()?

Intersection Observer avoids synchronous layout calculations and runs asynchronously, preventing janky animations. getBoundingClientRect() forces the browser to recalculate layouts on each scroll event.

What does the 'root' option represent in IntersectionObserver configuration?

The root option specifies the scrollable container used for intersection calculations. When set to null (default), the browser viewport is used as the root.

In the IntersectionObserver callback, what does the 'entries' parameter contain?

The callback receives an array of IntersectionObserverEntry objects. Each entry describes one target's current intersection state and includes properties like isIntersecting and intersectionRatio.

What is the correct sequence of operations to observe a DOM element with IntersectionObserver?

Correct sequence: create the observer with new IntersectionObserver(callback, options), then call observe() on target elements, and handle entries in the callback.

How does the browser determine if a target element intersects with the root?

The browser compares the target's bounding box against the root's bounding box (expanded by rootMargin) and calculates the overlapping area to determine intersection.

What is the role of 'rootMargin' in intersection calculation?

rootMargin expands (positive values) or shrinks (negative values) the root's intersection boundary, allowing callbacks to fire before/after actual viewport entry.

If rootMargin is set to '200px 0px 200px 0px', what does this mean?

CSS margin syntax applies top, right, bottom, left values. '200px 0px 200px 0px' means 200px top, 0px right, 200px bottom, 0px left.

What does the 'isIntersecting' property in an IntersectionObserverEntry tell you?

isIntersecting is a boolean that indicates whether the target currently overlaps the root's intersection rectangle, accounting for the threshold setting.

What is the difference between 'boundingClientRect' and 'intersectionRect' in IntersectionObserverEntry?

boundingClientRect is the target's full bounding box. intersectionRect is the actual overlapping area between target and root's intersection zone.

How would you calculate the visibility percentage of a target element from an IntersectionObserverEntry?

intersectionRatio already provides the visibility ratio as a decimal (0.0 to 1.0). Multiplying by 100 gives percentage, but the ratio itself is pre-calculated.

What information does 'rootBounds' provide in an IntersectionObserverEntry?

rootBounds is the DOMRect of the root's bounding box, expanded by rootMargin values. This defines the intersection detection zone.

Why is creating a single shared observer for multiple elements better than one observer per element?

One shared observer has less memory footprint and batches callback execution for all targets. Multiple observers duplicate memory and callback overhead unnecessarily.

In the shared observer pattern, what happens when you call unobserve() on a single target?

unobserve(target) removes only that specific target from the observer's watch list. The observer and other observed targets remain active.

What is the main limitation of using a single shared observer for multiple targets with different configurations?

A single observer applies one set of options (threshold, rootMargin) to all observed targets. If different targets need different configs, multiple observers are necessary.

How should you properly clean up a shared observer watching 100 images before page unload?

disconnect() stops all observations at once and destroys the observer. Calling unobserve() 100 times is inefficient compared to a single disconnect().

What effect does setting rootMargin to '200px 0px 0px 0px' have?

Positive rootMargin values expand the detection zone. '200px 0px 0px 0px' adds 200px to the top boundary, triggering callbacks 200px before viewport entry.

How would you use rootMargin and threshold together to load images 500px before they become fully visible?

rootMargin expands the detection zone outward; threshold determines when callback fires within that zone. '500px' rootMargin + threshold 0 fires callback 500px before element enters.

Can you use percentage values in rootMargin? If so, what do they represent?

rootMargin supports both px and % units. Percentage values scale with the root element's dimensions, enabling responsive pre-loading strategies.

What is the typical pattern for lazy loading images with IntersectionObserver?

Lazy load pattern: use data-src for the real image URL, assign it to src when the observer detects intersection, then unobserve to stop watching that image.

Why should you unobserve an image after its src is set in a lazy loading scenario?

Once an image is loaded, continuing to observe it wastes observer resources. unobserve() removes it from the watch list after the src is assigned.

How would you handle a lazy-loaded image that fails to load (404 error)?

Add an onerror event listener to the image element to detect load failures and display fallback UI or implement retry logic.

In a lazy loading scenario with 1000 images, what is the recommended approach?

Use a single shared observer for all 1000 images. One observer is more efficient than multiple observers and avoids memory duplication.

What is a 'sentinel element' in the infinite scroll pattern?

A sentinel is an invisible marker element at the bottom of the list. When observer detects it entering viewport, it triggers an API call to load the next page.

After infinite scroll loads a new page of 20 items and appends them to the DOM, what must you do with the sentinel?

After appending new items, move the sentinel to the bottom of the new content and re-observe it. Otherwise, it will never enter viewport again for subsequent pages.

How would you prevent multiple simultaneous API requests when sentinel is observed multiple times in quick succession?

Use a loading state flag (e.g., isLoading) checked in the callback. Ignore sentinel intersections when already fetching to prevent duplicate requests.

What user experience issue can occur if infinite scroll loads new items too quickly?

Rapid content insertion causes layout shift, jarring the user. Use requestAnimationFrame or debouncing to batch DOM updates and preserve scroll position.

What is the primary challenge with using video.play() inside an observer callback?

Modern browsers enforce autoplay policies requiring user gesture or muted video. Catch the promise rejection from play() and show a fallback play button.

How would you implement volume control based on visibility ratio in autoplay video?

Multiple thresholds fire callback at each ratio increment. Check intersectionRatio in callback and set video.volume proportionally (e.g., 0 at 0%, full at 100%).

What happens if you call video.play() before the video has buffered enough data?

Calling play() before sufficient buffering can cause stalling. Listen to 'canplay' event before calling play() to ensure enough data is buffered.

In a feed of videos (like TikTok), why should you mute only the current video instead of muting all videos?

Playing multiple videos with audio creates poor UX (overlapping sound). Mute non-focused videos and unmute only the primary video in view.

In a photo grid system like Instagram, what is the first stage of the loading strategy?

Stage 1: Use IntersectionObserver to lazy load small thumbnail images. This reduces initial page load and bandwidth significantly.

What is the purpose of hover pre-fetching in a photo grid design?

Hover pre-fetch detects mouseover on thumbnails and begins loading full-resolution images. This minimizes perceived wait time on click.

Why is virtual scrolling (rendering only visible rows) important for large photo grids?

Virtual scrolling renders only visible grid rows, removing offscreen DOM nodes. This dramatically reduces memory and rendering overhead for thousands of images.

In an Instagram-like photo grid, how would you handle layout shift when lazy-loaded images appear?

Reserve space before images load using CSS aspect-ratio or fixed width/height on containers. This prevents layout shift when images finally appear.

What would be the optimal IntersectionObserver configuration for a photo grid?

Use threshold: 0 or low value (0.1) to catch partial visibility; add positive rootMargin (e.g., '200px') to pre-load images before users scroll to them.

Intersection Observer API — System Design Concept

📚Intersection Observer APIPro

12 sections

~28 min total

35 quick quizzes

3 SD challenges linked

0 of 12 done·~33 min left

Concepts›Intersection Observer API›What Is the Intersection Observer API?

0 / 12

12 sections~28 min

What Is the Intersection Observer API?

Browser API that efficiently detects when DOM elements enter or leave viewport visibility

ReadQuizCode

~3 min

⋯

How Intersection Is Calculated

Browser compares target bounding box against root boundary adjusted by rootMargin

ReadQuizCode

~3 min

⋯

The IntersectionObserverEntry Object

Callback entry object containing visibility ratio, bounding boxes, and intersection metadata

ReadQuizCode

~3 min

⋯

Creating One Shared Observer for Performance

Single observer watching multiple targets reduces memory and callback overhead significantly

ReadQuizCode

~3 min

⋯

rootMargin for Pre-loading Before Viewport Entry

CSS margin syntax expands detection zone to trigger callback before element reaches viewport

ReadQuizCode

~3 min

⋯

Use Cases

Practical applications of Intersection Observer API across web platforms

Read

~3 min

⋯

Use Case 1: Lazy Loading Images

Load image src only when image enters viewport, reducing initial page bandwidth

ReadQuizCode

~3 min

⋯

Use Case 2: Infinite Scroll Sentinel

Detect when sentinel element reaches viewport to trigger pagination or data fetching

ReadQuizCode

~3 min

⋯

Use Case 3: Autoplay Video (Pause on Scroll-Out)

Play video when visible, pause when scrolled away using visibility ratio thresholds

ReadQuizCode

~3 min

⋯

System Design Questions

Architectural patterns and trade-offs for large-scale intersection detection systems

Read

~3 min

⋯

System Design: Photo Grid (Like Instagram)

Multi-stage loading strategy for image grids using lazy load, hover pre-load, and virtualization

ReadQuiz

~3 min

⋯

Practice test

35 questions

~12 min

🔒

Pro content

Intersection Observer API is a Pro concept. Upgrade to access full content, practice questions, and design challenges.

Upgrade to Pro →

Notes

🔍

Loading…