【React】检测元素是否出现在用户视窗内

在 React 中判断元素是否出现在用户视窗内（即元素可见性检测），常用的方案有以下几种，可根据场景选择

1、使用原生 IntersectionObserver（推荐）

IntersectionObserver 是浏览器原生 API，专门用于监听元素与视窗（或指定容器）的交叉状态，性能高效（异步执行，不阻塞主线程），适合大多数场景；

实现步骤：

通过 useRef 获取目标元素的 DOM 引用；
使用 useEffect 初始化 IntersectionObserver 实例；
在回调中判断元素是否可见，并执行相应逻辑；
组件卸载时停止监听；

javascript 复制代码

import { useRef, useEffect, useState } from 'react';

const VisibilityDetector = () => {
  const targetRef = useRef(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    // 初始化观察器
    const observer = new IntersectionObserver(
      ([entry]) => {
        // entry.isIntersecting 为 true 时表示元素进入视窗
        setIsVisible(entry.isIntersecting);
      },
      {
        // 可选配置：视窗比例阈值（0~1，0 表示元素刚进入就触发，1 表示完全进入）
        threshold: 0.1, 
        // 可选：指定监听的容器（默认是视窗）
        // root: document.querySelector('#scrollContainer'),
      }
    );

    // 开始观察目标元素
    if (targetRef.current) {
      observer.observe(targetRef.current);
    }

    // 组件卸载时停止观察
    return () => {
      if (targetRef.current) {
        observer.unobserve(targetRef.current);
      }
    };
  }, []); // 空依赖数组：只初始化一次

  return (
    <div ref={targetRef}>
      {isVisible ? '元素在视窗内' : '元素不在视窗内'}
    </div>
  );
};

export default VisibilityDetector;

2、监听滚动事件（兼容性方案）

如果需要兼容不支持 IntersectionObserver 的旧浏览器（如 IE），可以通过监听 scroll 事件，结合 getBoundingClientRect() 计算元素位置；

实现步骤：

用 useRef 获取元素引用；
监听 window.scroll 事件（或容器的滚动事件）；
在滚动回调中通过 getBoundingClientRect() 获取元素位置，判断是否在视窗内；
注意：需使用防抖优化性能（频繁滚动会触发多次回调）

javascript 复制代码

import { useRef, useEffect, useState } from 'react';
import { debounce } from 'lodash'; // 需安装 lodash（或自己实现防抖）

const VisibilityDetector = () => {
  const targetRef = useRef(null);
  const [isVisible, setIsVisible] = useState(false);

  // 防抖处理：滚动停止 100ms 后再执行
  const checkVisibility = debounce(() => {
    if (!targetRef.current) return;

    const rect = targetRef.current.getBoundingClientRect();
    const windowHeight = window.innerHeight || document.documentElement.clientHeight;
    const windowWidth = window.innerWidth || document.documentElement.clientWidth;

    // 判断元素是否与视窗交叉（部分可见即可）
    const isInView = (
      rect.top <= windowHeight &&
      rect.bottom >= 0 &&
      rect.left <= windowWidth &&
      rect.right >= 0
    );

    setIsVisible(isInView);
  }, 100);

  useEffect(() => {
    // 监听滚动事件
    window.addEventListener('scroll', checkVisibility);
    // 初始化时检查一次
    checkVisibility();

    // 组件卸载时移除监听
    return () => {
      window.removeEventListener('scroll', checkVisibility);
      checkVisibility.cancel(); // 清除防抖定时器
    };
  }, [checkVisibility]);

  return (
    <div ref={targetRef} style={{ height: '500px', marginTop: '1000px' }}>
      {isVisible ? '元素在视窗内' : '元素不在视窗内'}
    </div>
  );
};

export default VisibilityDetector;

3、使用第三方库

如果需要更复杂的可见性检测（如元素可见比例、动画触发等），可以使用成熟的库；

安装：npm install react-intersection-observer

javascript 复制代码

// react-intersection-observer：基于 IntersectionObserver 的 React 封装，API 更简洁
import { useInView } from 'react-intersection-observer';

const MyComponent = () => {
  const { ref, inView } = useInView({
    threshold: 0.5, // 元素可见 50% 时触发
  });

  return <div ref={ref}>{inView ? '可见' : '不可见'}</div>;
};

总结：

优先使用 IntersectionObserver 或其封装库（react-intersection-observer）性能最佳；
兼容性要求高时使用滚动事件 + getBoundingClientRect()，但需做好防抖优化；
常见应用场景：图片懒加载、滚动动画触发、列表无限加载等；