Intersection Observer Doesn't Work on targets without fixed height

I am using intersection observer, but it doesn't appear to work on target containers without a set height.

Is there a way to use IO without having to limit the height of the target?

Here is the jsfiddle

Notice that the second element that doesn't have a set height does not affect the IO.

It seems like the cause is the threshold value in the IO options. If I remove that it works:

var options = {      threshold: 0.5  }    var intersectionObserver = new IntersectionObserver(function(entries, observer) {          entries.forEach(entry => {                test.innerHTML = entry.target.id         });    }, options);    var els = document.getElementsByClassName("els");  for (var i = 0; i < els.length; i++){}        intersectionObserver.observe(els[i]);  }  

https://stackoverflow.com/questions/66538889/intersection-observer-doesnt-work-on-targets-without-fixed-height March 09, 2021 at 07:52AM