0

Want to get some perspective on the Intersection Observer API.

For simplicity, I have a div element (Square 500px x 500px) that will rotate based on the user's scroll position. This is obtained by entry.boundingClientRect.top.

However, once the intersectionRatio reaches 1 (the element is in full view of the window), the square will stop rotating until it begins to fall outside of the viewport.

The threshold of the observer is set to an array from [0-100] and I understand once the element is in full view, the observer's job is more or less done but I want the rotation to still occur as the user scrolls down further and the square is still in view.

Some workarounds I found..

  1. Div container with 100vh

  2. Square height to be a percentage and offset the rootMargin within observer options.

Is it possible for the observer to still work when it is fully in view?

Would like to hear other approaches!

jackstride
  • 53
  • 8
  • "observer to still work"...can you be more specific about what you want it to do that it's not doing? I mean it would still be "working," in that it would start firing more events as soon as the object's intersection ratio changes (e.g. when it starts scrolling off the screen again). It might help if you posted [minimal example](https://stackoverflow.com/help/minimal-reproducible-example) code. – David784 Jun 09 '20 at 12:41
  • @David784 When the square is fully within the viewport, the animation will stop. When the square begins to falls outside the viewport, it will rotate again. The square should continue to rotate when it is fully inside the viewport. – jackstride Jun 09 '20 at 12:48

0 Answers0