javascript - Intersection Observer API：观察视口的中心

Question

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

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

但它似乎不能正常工作。

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

Answer 1

Intersection Observer 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的文章，您可以在其中尝试不同的配置（此版本有一些限制），也许您会找到您需要的组合。