tcaptan-cr

Lazy Load Scroll Margin Explainer

Changes the lazy load intersection observer's init dictionary to use a scrollMargin instead of a rootMargin.

This allows lazy loading images contained inside CSS scrollers, like carousels, to load as expected when near the viewport instead of the current behavior where these images load when at least one pixel is intersecting the viewport.

Lazy Load Scroll Margin Specification

Problem

tcaptan-cr

Intersection Observer Scroll Margin Explainer

Intersection Observer scrollMargin allows developers to observe targets inside nested scroll containers that are currently clipped away by the scroll containers. This is achieved by expanding the container's clipping rect by the scrollMargin when calculating the intersection.

Intersection Observer Scroll Margin Specification

Problem