React useRef调用scrollIntoView仅触发一次问题排查

你将scrollIntoView逻辑直接写在组件函数体（渲染阶段）执行，违反了React副作用的执行时序要求，这是逻辑失效的核心原因：

• 当isOnScreen状态变化触发组件重渲染时，DOM还未完成提交更新，此时调用滚动方法，要么被浏览器默认滚动逻辑覆盖，要么被IntersectionObserver和渲染流程的时序差吞掉指令，只有页面首次重载、元素已在视口内的场景下，没有后续状态更新打断，才会偶然生效。
• 现有逻辑缺少触发锁：元素滚动到居中位置的过程中，会持续触发IntersectionObserver回调，反复调用scrollIntoView会造成滚动冲突，甚至出现滚动卡死、位置跳变的问题。
• 你的useOnScreen钩子用了默认的IntersectionObserver配置，只要元素有1px进入视口就会判定为可见，和你需要的“元素进入视口后滚动到居中”的触发时机不匹配。

• 把滚动逻辑移到useEffect中执行：副作用逻辑必须放在DOM提交完成后的useEffect回调里执行，确保拿到的是最新渲染完成的DOM节点，滚动指令不会被渲染流程打断。
• 增加触发锁避免重复调用：滚动触发后立刻标记状态，等滚动完成、元素真正居中后再重置状态，避免IntersectionObserver反复触发滚动逻辑。
• 优化useOnScreen的触发阈值：调整IntersectionObserver的触发比例，等元素进入视口一定比例后再触发滚动，避免刚露边就触发滚动的突兀感。

业务组件代码 #

const Component = () => {
    const sectionRef = useRef<HTMLDivElement>(null);
    const isOnScreen = useOnScreen(sectionRef);
    // 增加滚动锁，避免重复触发
    const hasScrolled = useRef(false);
    
    useEffect(() => {
        // 元素进入视口、ref存在、还没触发过滚动时才执行
        if (isOnScreen && sectionRef.current && !hasScrolled.current) {
            hasScrolled.current = true;
            sectionRef.current.scrollIntoView({ 
                behavior: 'smooth', 
                block: 'center', 
                inline: 'nearest'
            });
            // 后续动画逻辑可放在滚动监听回调中，等元素居中后再启动
            // 避免动画执行时元素停在屏幕底部
        }
    }, [isOnScreen])
    
    return ( 
        <section ref={sectionRef}>
            {/* ...child components */}
        </section>
    )
}

export default Component

优化后的useOnScreen钩子 #

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

export default function useOnScreen(ref: RefObject<HTMLElement>, threshold = 0.3) {
  const observerRef = useRef<IntersectionObserver | null>(null);
  const [isOnScreen, setIsOnScreen] = useState(false);

  useEffect(() => {
    observerRef.current = new IntersectionObserver(([entry]) =>
      setIsOnScreen(entry.isIntersecting),
      {
        // 元素进入视口30%时才判定为可见，数值可按需调整
        threshold
      }
    );
  }, [threshold]);

  useEffect(() => {
    const currentRef = ref.current;
    if (currentRef) {
        observerRef.current?.observe(currentRef);
    }

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

  return isOnScreen;
}

• 如果页面有固定定位的顶部导航栏，需要给目标section元素加scroll-margin-top样式，或者给IntersectionObserver配置rootMargin参数，避免滚动居中后元素被导航栏遮挡。
• 如果后续要接管滚动逻辑做自定义动画，建议在触发自定义滚动前先禁用原生滚动，等动画执行完成后再恢复，避免原生平滑滚动和自定义动画冲突。
• 如果滚动容器不是默认的window，而是页面内部某个带滚动属性的容器，需要给IntersectionObserver指定对应的root节点，否则视口判定会出现偏差。

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