React移动端同页锚点导航失效问题求助

问题概述 #

单页应用中通过锚点或ref+scrollIntoView实现的同页分区导航在桌面端正常，但移动端（带汉堡展开/收起侧边栏）完全失效，两种实现方式均无效果。

针对性解决方案 #

1. 修复Section的Ref注册逻辑 #

核心问题：useRef的引用本身是稳定值，原代码中useEffect依赖aboutMeRef/portfolioRef不会触发更新，导致部分Section的Ref未正确注册到Context；同时experience、skills未添加Ref，无法通过Context导航。

修改代码（MainContent组件）：

export const MainContent = () => {
  const scrollNavContext = useContext(ScrollNavContext);
  const aboutMeRef = useRef<HTMLElement>(null);
  const experienceRef = useRef<HTMLElement>(null);
  const skillsRef = useRef<HTMLElement>(null);
  const portfolioRef = useRef<HTMLElement>(null); 

  // 用useLayoutEffect确保DOM渲染完成后注册所有Ref
  useLayoutEffect(() => {
    const sectionList = [
      { ref: aboutMeRef, id: 'aboutme' },
      { ref: experienceRef, id: 'experience' },
      { ref: skillsRef, id: 'skills' },
      { ref: portfolioRef, id: 'portfolio' },
    ];

    sectionList.forEach(({ ref, id }) => {
      if (ref.current) {
        scrollNavContext.pushSection?.({
          name: id,
          refObj: ref,
        });
      }
    });
  }, [scrollNavContext.pushSection]);

  return (
      <div
        id="Content"
        className={clsx(
          'mt-[54px]',
          'md:mt-0',
          'relative',
          'overflow-x-hidden'
        )}
      >
        <CandyBackground />

        <div className={clsx('relative', 'z-20')}>
          <section ref={aboutMeRef} id="aboutme">
            <AboutMe />
          </section>
          <section ref={experienceRef} id="experience">
            <Experience />
          </section>
          <section ref={skillsRef} id="skills">
            <Skills />
          </section>
          <section ref={portfolioRef} id="portfolio">Portfolio</section>
        </div>
      </div>
  );
};

2. 优化滚动逻辑，适配移动端布局 #

核心问题：移动端存在顶部固定导航栏（mt-[54px]），直接调用scrollIntoView会导致目标Section被遮挡；同时部分场景下滚动容器不是window，导致滚动失效。

修改代码（Context的navigate方法）：

const navigate = (section: string) => {
  const targetSection = sections.find((a) => a.name === section);
  const headerHeight = 54; // 匹配移动端顶部导航栏高度

  if (targetSection && targetSection.refObj.current) {
    // 计算偏移后的滚动位置，避开顶部导航栏
    const elementRect = targetSection.refObj.current.getBoundingClientRect();
    const scrollTop = window.pageYOffset + elementRect.top - headerHeight;

    // 使用window.scrollTo实现精准滚动，替代原生scrollIntoView
    window.scrollTo({
      top: scrollTop,
      behavior: 'smooth'
    });
  }
};

辅助CSS（可选）：给所有Section添加滚动边距，配合原生scrollIntoView使用：

section {
  scroll-margin-top: 54px;
}

3. 避免汉堡菜单收起事件干扰滚动 #

核心问题：点击导航项后立即收起侧边栏，页面布局变化会中断滚动操作。

修改代码（NavItem组件的handleOnClick）：

const handleOnClick = () => {
  // 优先执行滚动逻辑
  scrollNavContext.navigate(url || '');
  // 延迟收起菜单，确保滚动操作完成
  setTimeout(() => {
    onClick?.();
  }, 100); // 可根据实际滚动速度调整延迟时间
};

4. 检查滚动容器的Overflow设置 #

核心问题：如果父容器（如#Content）设置了overflow-y: auto，滚动事件会被限制在容器内而非window，导致全局滚动失效。

处理方式：

• 移除#Content的overflow-y: auto样式，确保滚动容器为window；
• 若必须保留容器滚动，修改navigate逻辑为针对容器滚动：

const navigate = (section: string) => {
  const targetSection = sections.find((a) => a.name === section);
  const contentContainer = document.getElementById('Content');
  const headerHeight = 54;

  if (targetSection && targetSection.refObj.current && contentContainer) {
    const scrollTop = targetSection.refObj.current.offsetTop - headerHeight;
    contentContainer.scrollTo({
      top: scrollTop,
      behavior: 'smooth'
    });
  }
};

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