JavaScript IntersectionObserver在DOM布局变更时的异常行为排查

预期行为 #

IntersectionObserver 需准确报告被观测组件在视口中的可见状态。

当前行为 #

拖拽组件修改DOM布局后，IntersectionObserver 错误地将仍处于视口中的组件标记为不可见。

相关代码 #

自定义useOnScreen Hook #

// intersection observer is buggy with golden layout
// move C component and keep all in view, but B component will be marked not on screen
function useOnScreen(label, ref) {
  const [isOnScreen, setIsOnScreen] = useState(false);
  const observerRef = useRef(null);

  useEffect(() => {
    observerRef.current = new IntersectionObserver(
      ([entry]) => {
        setIsOnScreen(entry.isIntersecting);
      },
      { root: document.body }
    );
  }, []);

  useEffect(() => {
    observerRef.current.observe(ref.current);

    return () => {
      observerRef.current.disconnect();
    };
  }, [ref]);

  return isOnScreen;
}

React组件中Hook的使用方式 #

const Text = ({ label }) => {
  const ref = useRef(null);
  const onScreen = useOnScreen(label, ref);
  useEffect(() => {
    if (onScreen) {
      console.log("onscreen", label);
      return () => {
        console.log("not on screen", label);
      };
    }
  }, [onScreen, label]);

  return <h1 ref={ref}>{label}</h1>;
};

排查发现 #

• 拖拽布局变更后，目标组件对应的IntersectionObserverEntry中rootBounds.width和rootBounds.height为0，导致视口大小误判。
• 设置options.root = document.body无法解决问题。
• 直接忽略rootBounds为0的回调会遗漏组件真正不可见的场景。
• 考虑监听GoldenLayout事件跟踪标签状态，但不确定是否为最优方案。

方案1：过滤无效rootBounds并手动校验可见性 #

修改Observer回调逻辑，当rootBounds无效时，手动计算元素与视口的交集状态：

function useOnScreen(label, ref) {
  const [isOnScreen, setIsOnScreen] = useState(false);
  const observerRef = useRef(null);

  useEffect(() => {
    observerRef.current = new IntersectionObserver(
      ([entry]) => {
        // 处理rootBounds无效的情况
        if (entry.rootBounds?.width === 0 || entry.rootBounds?.height === 0) {
          const rect = ref.current.getBoundingClientRect();
          // 手动判断元素是否在视口范围内
          const visible = rect.top < window.innerHeight && rect.bottom > 0 &&
                          rect.left < window.innerWidth && rect.right > 0;
          setIsOnScreen(visible);
          return;
        }
        setIsOnScreen(entry.isIntersecting);
      },
      { root: document.body }
    );
  }, []);

  useEffect(() => {
    const element = ref.current;
    if (element) observerRef.current.observe(element);
    return () => observerRef.current.disconnect();
  }, [ref]);

  return isOnScreen;
}

方案2：监听GoldenLayout布局变更，重新初始化Observer #

利用GoldenLayout的stateChanged事件，在布局变更时重新创建Observer，避免旧实例的尺寸计算异常：

function useOnScreen(label, ref) {
  const [isOnScreen, setIsOnScreen] = useState(false);
  const observerRef = useRef(null);

  const createObserver = () => {
    // 销毁旧实例
    observerRef.current?.disconnect();
    // 创建新Observer并重新观测元素
    observerRef.current = new IntersectionObserver(
      ([entry]) => setIsOnScreen(entry.isIntersecting),
      { root: document.body }
    );
    ref.current && observerRef.current.observe(ref.current);
  };

  useEffect(() => {
    createObserver();
    // 绑定GoldenLayout布局变更事件
    const layout = window.goldenLayoutInstance; // 替换为你的GoldenLayout实例
    layout?.on('stateChanged', createObserver);

    return () => {
      layout?.off('stateChanged', createObserver);
      observerRef.current?.disconnect();
    };
  }, [ref]);

  return isOnScreen;
}

方案3：使用默认根节点（浏览器视口） #

移除root: document.body配置，使用IntersectionObserver默认的根节点（浏览器视口），避免document.body在布局变更时的尺寸计算问题：

useEffect(() => {
  observerRef.current = new IntersectionObserver(
    ([entry]) => {
      setIsOnScreen(entry.isIntersecting);
    }
    // 移除root配置，使用默认视口
  );
}, []);

内容的提问来源于stack exchange，提问作者rachitiitr