React Intersection Observer多元素监听：避免指示器频繁切换

要实现「直到前一个元素完全移出视口才切换到下一个元素」的效果，可以通过以下步骤调整代码：

1. 维护元素可见状态数组 #

首先创建状态数组，跟踪每个图片的可见状态，方便后续判断元素是否在视口中：

const [elementVisible, setElementVisible] = useState(Array(images.length).fill(false));
const [activeIndex, setActiveIndex] = useState(0);

2. 调整交叉观察器配置 #

使用useInView的onChange回调（替代仅监听inView），并设置threshold: 0，确保元素完全进入/离开视口时才触发事件：

// 在每个图片组件内部
const { ref } = useInView({
  onChange: (inView, entry) => {
    // 更新当前元素的可见状态
    setElementVisible(prev => {
      const newState = [...prev];
      newState[index] = inView;
      return newState;
    });

    // 仅当当前激活的元素完全离开视口时，切换到下一个可见元素
    if (!inView && index === activeIndex) {
      // 取当前可见元素中索引最大的（匹配向下滚动的逻辑）
      const nextVisibleIndex = elementVisible.findLastIndex(isVisible => isVisible);
      if (nextVisibleIndex !== -1) {
        setActiveIndex(nextVisibleIndex);
      }
    }
  },
  threshold: 0, // 触发条件：元素完全进入/离开视口
});

3. 处理初始加载状态 #

页面加载时手动检查初始可见元素，保证指示器默认指向正确：

useEffect(() => {
  const initialVisibleIndex = elementVisible.findIndex(isVisible => isVisible);
  if (initialVisibleIndex !== -1) {
    setActiveIndex(initialVisibleIndex);
  }
}, []);

原理说明 #

• threshold: 0确保只有元素完全离开视口（交叉比例为0）或完全进入视口（交叉比例>0）时，才会触发状态更新。
• 通过elementVisible数组跟踪所有元素的可见状态，避免了两个元素同时部分可见时的频繁切换，仅在之前激活的元素完全消失后，才切换到当前可见的元素。

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