Intersection Observer API：观察视口的中心

Question

我试图观察视口中心的交点，我尝试在 rootMargin 中传递负值

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

但它似乎不能正常工作。

我的要求是当我的元素到达屏幕中心时观察交叉点。

Answer 1

交叉点观察器 rootMargin 和交叉点的处理方式在几次尝试后可能会变得有点混乱，所以我将尝试详细说明如何在特定情况下实现这一点：

• 当元素的顶部或底部到达视口的垂直中心时检测元素的交集

在视口中心相交元素的顶部/底部

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);

通过这样做， elementHasIntersected回调将在元素的最顶部或最底部边缘与视口中心相交时被调用。

相当容易吧？ 现在，如果您想实现类似的“中心交叉点”场景，例如：

• 当元素的垂直中心到达视口的垂直中心时检测元素的交集

然后，这将需要一种不同的方法作为rootMargin: '-50% 0% -50% 0%'永远不会允许在 50% 处触发交集——因为元素永远不会有 50% 可见。 如果它对您有价值，我很乐意就这个特定场景进行头脑风暴，所以请告诉我。

这是我发布的一篇关于 Intersection Observer API和Intersection Observer Playground 的文章，我将它们放在一起，您可以在其中尝试不同的配置（此版本有一些限制），也许您会找到所需的组合。