Feature request: Infinity rootMargin

[Jessidhia]

This sounds silly at first glance, but the use case is to have an Infinity rootMargin in a specific direction, e.g. Infinity 0 0 0.

The use case, in this case, is to trigger animations as the user scrolls down to them, but not to trigger them when the user scrolls up -- the animations should be in the "already performed" state in that case. The current workaround is to give a very large amount of pixels as the top margin, but it's not as universal as having some potentially optimizable way of always considering elements off a specific direction as intersecting.

[szager-chromium]

I'm not clear on what you're doing. How would an infinite top root margin allow you to "trigger animations as the user scrolls down to them"? The target element would be reported as 100% intersecting if it's anywhere on screen or scrolled below the viewport. You wouldn't receive any further notifications until the target element was scrolled offscreen above the viewport. How would you know when to start the animation?

Could you provide a concrete example?

[dcastil]

I have the same use case. I need to animate in elements on a page as the user scrolls down, but they should stay on the page if the user scrolled past that element. Basically all elements which appear at the bottom edge of the viewport should always animate in, but not at the top edge of the viewport.

An example: The IntersectionObserver is used in a React app and sets some state – let's call it isIntersecting – to a boolean indicating whether the element is intersecting or not. Another component then takes care of animating the element in and out based on the isIntersecting value. To get the behavior I want I need to set the top rootMargin to a small negative value and the bottom rootMargin to infinity.

Currently I solve this by using a big value for the bottom rootMargin, but it feels wrong since the page could have a bigger height than that.

[phoenixeliot]

Came here to say the same. Instead I keep track of a separate state variable that indicates if the intersectionobserver has ever said that an element has been seen, which works OK, but isn't great in case the user scrolls too fast to catch it. Basically I want to load anything in the current viewport or above, no matter how far above it is.

And for some reason, setting very very large top rootMargin (eg 99999999px) breaks the intersectionobserver and only counts things as seen once they hit the top edge of the screen. Very weird.

[brysonandrew]

Take a look at https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API the section Handling intersection changes shows how to detect dsc and asc and from there you should be able to produce the conditions you require.

I had a similar use-case but ended up solving it using boundingClientRect.top and rootBounds.height, which may also work.