javascript - 如何检查节点在intersectionObserver api中是否可见

Question

像这样给定IntersectionObserver：

const observeVisibility = intersectionMargin => {
    const observer = new IntersectionObserver(
        nodes => {
            if (nodes[0].isIntersecting) {
                /* is really in viewport? */
                this.observer.disconnect();
            }
        },
        { rootMargin: intersectionMargin }
    );

    observer.observe(...);
};

如何检查节点本身是否实际上在视口中，或者只是导致观察者被调用的intersectionMargin？

Answer 1

IntersectionObserver将在加载时立即触发。之后，您传递给的回调IntersectionObserver将在isIntersecting更改或intersectionRatio跨越您配置threshold的 s 之一时被调用。

如您所见，回调获取条目列表，然后由您来做您想做的事情。

//assuming 'threshold' is defined in scope

nodes => {
  nodes.forEach(entry => {
    const { isIntersecting, intersectionRatio } = entry;

    if (Array.isArray(threshold)) {
      threshold = threshold[threshold.length - 1];
   }

    if (isIntersecting || intersectionRatio >= threshold) {
      this.observer.disconnect();
    }
  }
}