Originally posted by @zcorpan in whatwg/html#5408 (comment):

Scrolling vertically & horizontally for:

• Element scroll container scrolling

So, I'm not sure how this would work. In particular, for the image carousel use case, using only the implicit root (which I think browser implementations do now) would mean that there is no threshold for the element scroll container case, so those images would only start loading after they are partially in view.

There is likely a performance hit to observing all scrollable elements when lazy images are used. Is there a good way to make it "do what I want" without adding more API surface? Or is the web developer explicitly setting the root the best way to solve this?

Should IntersectionObserver API provide for a way to apply a rootMargin for all scroll containers, without needing to create multiple observers (and respond to styling changes causing scroll containers to appear/disappear)?

One use case here is lazy-loading for image carousels. The page has a scrollable div and many images with horizontal scrolling. To speed up page load time and reduce network usage, the images that aren't initially visible are annotated with loading=lazy.

The loading=lazy feature is defined in terms of IntersectionObserver, with root set to implicit root for all elements.

As specified and implemented right now, this causes the images in the image carousel to only start loading when they are at least partially visible -- because the root is the top-level viewport, not the scroll container.

I think ideally an image in this case would start loading when:

• the scroll container is "about to become visible" or is visible
• the image in the scroll container is "about to become visible" or is visible

I don't know how to solve this, but I'm hoping for something that results in a good user experience with the current web developer ergonomics of only adding loading=lazy to the right images.

cc @domfarolino @emilio @smfr