跟踪溢出列表项时，如何在react-intersection-observer中设置root？

问题根源 #

你之前的代码存在两个核心问题：

1. root参数设置错误：IntersectionObserver的root需要传入DOM元素，但你直接传递了useRef返回的对象，正确的写法应该是wrapperRef.current（ref对象的current属性才指向实际DOM元素）。
2. 单个useInView无法跟踪多个元素：你在循环里给所有列表项绑定同一个ref，最终只有最后一个元素会被关联，无法监听每个项的可见状态。

正确实现方案 #

要跟踪第一个溢出容器的列表项，需要给每个列表项单独绑定useInView，并将容器作为观察的根元素。

步骤1：给容器设置样式和ref

容器必须设置固定高度和overflow属性，这样才会产生“溢出”的边界：

.list-container {
  height: 300px; /* 根据需求调整高度 */
  overflow-y: auto;
  border: 1px solid #eee;
}

步骤2：组件代码实现

import { useRef, useState } from 'react';
import { useInView } from 'react-intersection-observer';

const List = ({ data }) => {
  const containerRef = useRef(null);
  // 存储每个列表项的可见状态，索引与data一一对应
  const [itemVisibility, setItemVisibility] = useState(new Array(data.length).fill(true));

  // 找到第一个溢出（不可见）的元素索引
  const firstOverflowIndex = itemVisibility.findIndex(isVisible => !isVisible);

  return (
    <div className="list-container" ref={containerRef}>
      {data.map((item, index) => {
        const { ref, inView } = useInView({
          threshold: 0,
          // 传入容器的DOM元素作为根观察器
          root: containerRef.current,
          // 当元素可见状态变化时更新状态
          onChange: (visible) => {
            setItemVisibility(prev => {
              const updated = [...prev];
              updated[index] = visible;
              return updated;
            });
          }
        });

        return (
          <div key={index} ref={ref} style={{ padding: '12px', borderBottom: '1px solid #eee' }}>
            {item}
            {index === firstOverflowIndex && <span style={{ color: 'red', marginLeft: '8px' }}>「第一个溢出项」</span>}
          </div>
        );
      })}
      {firstOverflowIndex !== -1 && (
        <div style={{ padding: '12px', backgroundColor: '#f5f5f5' }}>
          第一个溢出元素索引：{firstOverflowIndex}
        </div>
      )}
    </div>
  );
};

export default List;

关键说明 #

• root参数正确设置：通过containerRef.current传入容器的DOM元素，让IntersectionObserver以容器为视口判断元素是否可见。
• 每个项单独监听：循环中为每个列表项调用useInView，确保能跟踪每个项的可见状态。
• 状态更新与索引计算：通过onChange回调更新每个项的可见状态数组，再用findIndex找到第一个不可见的项，即为第一个溢出容器的元素。

注意事项 #

• 如果列表数据量极大，频繁更新状态可能影响性能，可以考虑优化：比如找到第一个溢出项后，停止监听后续元素的状态变化。
• 容器的overflow属性必须设置为auto或scroll，否则IntersectionObserver会默认以浏览器视口作为根元素，无法检测容器内的溢出。

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