search

w3c / IntersectionObserver

Intersection Observer
https://www.w3.org/TR/intersection-observer/
Other
3.62k stars 522 forks source link

Avoiding applying both scrollMargin and rootMargin #519

Closed progers closed 7 months ago

progers commented 12 months ago

Consider a developer using intersection observer to implement lazy loading for an iframe. There does not seem to be a good migration path to integrate scrollMargin while supporting engines that do not yet support it. Applying both scrollMargin and rootMargin will cause the margin to be doubled (if the root is a scrollport) in engines that support scrollMargin (spec). It does not seem easy to feature-detect scrollMargin.

Should we change the spec to only apply rootMargin, if specified, rather than scrollMargin + rootMargin, when calculating the root intersection when the root is a scrollport?

emilio commented 7 months ago

It does not seem easy to feature-detect scrollMargin.

@progers what is wrong with the usual way of feature-detecting dictionary members?

function isScrollMarginSupported() {
  let supported = false;
  new IntersectionObserver(() => {}, { get scrollMargin() { supported = true; } });
  return supported;
}

Seems to work just fine...

progers commented 7 months ago

Thanks @emilio ! I just wasn't aware that this was a common pattern for feature detection. Given that, I think we can close this bug.

emilio commented 7 months ago

Also even easier (and cheaper): "scrollMargin" in IntersectionObserver.prototype or so