I'm trying to trigger the IntersectionObserver when the top of the element hits the top of the window and when the bottom of the element hits the bottom of the window.

The element I'm observing has a height of 200vh.

With the following code I'm able to trigger the IntersectionObserver when the element reaches the top of the page:

const observer = new IntersectionObserver(([entry]) => {
  // trigger observer
}, {
  rootMargin: '0px 0px -100% 0px',
});

observer.observe(ref.current);

This works because the bottom of the rootMargin has a -100% value.

But when I add 100% to the top of the rootMargin it won't work.

Please checkout in full window:
https://codesandbox.io/s/intelligent-bose-v3on2?file=/src/App.js