Estoy tratando de activar IntersectionObserver cuando la parte superior del elemento toca la parte superior de la ventana y cuando la parte inferior del elemento toca la parte inferior de la ventana.

El elemento que estoy observando tiene una altura de 200vh .

Con el siguiente código, puedo activar IntersectionObserver cuando el elemento llega a la parte superior de la página:

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

Esto funciona porque la bottom de rootMargin tiene un valor de -100% .

Pero cuando agrego 100% a la top de rootMargin , no funcionará.

Por favor, compra en la ventana completa:
https://codesandbox.io/s/intelligent-bose-v3on2?file=/src/App.js