Intersection Observer API: Observe the center of the viewport

Question

I am trying to observe the intersection at center of viewport, I have tried with passing negative values in rootMargin

rootMargin: '-45% 10% -45%'

But it doesn't seems to be working properly.

My requirement is to observe the intersection when my element is reaching the center of screen.

Answer 1

Intersection Observer rootMargin and how intersections are handled could become a bit confusing after a couple of tries, so I'll try to elaborate how could you make this happen for a specific scenario:

• Detect the intersection of an element when its top or bottom reaches the vertical center of the viewport

Intersecting element's top/bottom at the center of the viewport

const intersectionAtTopOrBottomElement = document.querySelector('.top-bottom-element');

const elementHasIntersected = (entries, o) => {...};
const ioConfiguration = {
  /**
   * This rootMargin creates a horizontal line vertically centered
   * that will help trigger an intersection at that the very point.
   */
  rootMargin: '-50% 0% -50% 0%',

  /**
   * This is the default so you could remove it.
   * I just wanted to leave it here to make it more explicit
   * as this threshold is the only one that works with the above
   * rootMargin
   */
  threshold: 0 // 
};

const observer = new IntersectionObserver(elementHasIntersected, ioConfiguration);
observer.observe(intersectionAtTopOrBottomElement);

By doing this the elementHasIntersected callback will get called as soon as the element's most top or most bottom edge intersects with the center of the viewport.

Fairly easy right? Now, if you'd like to achieve a similar "center intersection" scenario such as:

• Detect the intersection of an element when its vertical center reaches the vertical center of the viewport

Then, this would need a different approach as the rootMargin: '-50% 0% -50% 0%' would never allow the intersection to be triggered at 50%–as the element would never be 50% visible. I'd be happy to brainstorm about this specific scenario if it's valuable to you, so let me know.

Here's an article I posted about the Intersection Observer API and The Intersection Observer Playground I put together where you can try different configurations (this version has some limits) and maybe you'll find the combination you need.