如何修复React中视口与元素相交检测的resize异常问题

你的检测函数在边界场景下逻辑有误，导致元素完全脱离视口时仍返回true。以下是修复方案：

修复后的代码 #

import React, { useEffect, useRef } from "react";
import "./styles.css";

function isElementInViewport(el) {
  if (!el) return false;
  const rect = el.getBoundingClientRect();
  const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
  const viewportHeight = window.innerHeight || document.documentElement.clientHeight;

  // 确保元素与视口存在实际重叠区域
  return (
    rect.top < viewportHeight &&
    rect.bottom > 0 &&
    rect.left < viewportWidth &&
    rect.right > 0
  );
}

export default function App() {
  const testElRef = useRef(null);

  useEffect(() => {
    const handleResize = () => {
      const isIntersecting = isElementInViewport(testElRef.current);
      console.log(isIntersecting);
    };

    window.addEventListener('resize', handleResize);
    // 组件卸载时移除监听，避免内存泄漏
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div className="App">
      <div
        ref={testElRef}
        style={{ backgroundColor: 'red', height: '200px', width: '200px' }}
      >
        test
      </div>
    </div>
  );
}

关键修复点 #

• 修正检测逻辑：将原条件中的<=/>=改为</>，确保只有元素与视口存在实际像素重叠时才返回true（比如元素顶部刚好与视口底部对齐时，不会被误判为相交）。
• 添加空值校验：先判断元素是否存在，避免getBoundingClientRect调用报错。
• 改用React Ref：替代document.getElementById，更符合React组件化开发的规范。
• 清理事件监听：在useEffect的返回函数中移除resize监听，防止组件卸载后残留事件绑定导致内存泄漏。

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