Javascript IntersectionObserverEntry.intersectionRatio等于1，然后在刷新页面时更改为0

我试图延迟某些乐蒂动画，直到容器div完全（100%）在视图中。我正在使用

react

，

样式化组件

，

next.js

。我还直接使用了

IntersectionObserver

预期行为：如果元素完全在视图中，则返回

true

。否则返回

false

实际行为：刷新页面时，如果元素不在视图中，则返回

true

，然后返回

false

：）。这会触发我的

useffect

，它最终会播放不在视图中的动画

我首先尝试了包

react intersection observer

。它产生了同样的结果。所以我想自己去实现它。 当实例化

IntersectionObserver

并为其提供

1

或

[0，1]

时，我尝试使用

阈值

选项。它给出了同样的行为。所以我最后自己检查了intersectionRatio，这也没有解决问题

使用IntersectionObserver代码：

function useIntersectionObserver() {
  const targetRef = useRef<HTMLDivElement>(null);
  const [isIntersecting, setIsIntersecting] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        console.log(entry);
        setIsIntersecting(entry.intersectionRatio === 1);
      },
      {
        root: window.document.body,
        threshold: [0, 1]
      }
    );

    if (targetRef.current) observer.observe(targetRef.current);

    return () => {
      observer.disconnect();
    };
  }, [targetRef]);

  return { targetRef, isIntersecting };
}

---

猜猜：这可能是因为SSR吗？。查看是否所有元素的日志都显示在控制台中。如果是这种情况，可以在设置相交之前添加process.browser检查。

useEffect(() => {
    console.log(isIntersecting);
    if (isIntersecting) {
      setTimeout(
        () => {
          lottieWeb.play('green-graph-lottie');
        },
        isInitialLoad ? BASE_DELAY * 1000 : 50
      );
    }
  }, [isIntersecting]);