带固定Header的React-scroll Link Offset大屏正常小屏滚动过度问题

问题现象 #

页面头部有固定高度的Header，使用React-scroll的Link组件设置offset值，确保滚动到目标区域时内容不被Header遮挡。大屏设备上表现正常，但小屏设备点击导航后，滚动位置会远超目标区域开头，偏移量甚至超过Header高度，动态监听窗口宽度调整offset也无法解决。

相关代码 #

function Header() {
  const [menuAnchor, setMenuAnchor] = useState(null);
  const [offset, setOffset] = useState(-90); // Default offset
  const openMenu = (event) => {
    setMenuAnchor(event.currentTarget);
  };

  const closeMenu = () => {
    setMenuAnchor(null);
  };

  const pages = ['About', 'Skills', 'Projects', 'Contact'];
  

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth <= 768) {
        // Adjust the offset for smaller screens
        setOffset(-120); 
      } else {
        // Default offset for larger screens
        setOffset(-90);
      }
    };
    // Set initial offset
    handleResize();
    // Update offset on window resize
    window.addEventListener('resize', handleResize);
    // Clean up the event listener
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);
  return (
    <AppBar
      className='navbar'
      position="fixed"
      style={{ backgroundColor: 'white' }}
      sx={{ height: '90px', display: 'flex', justifyContent: 'center' }}
    >
      <Container maxWidth="xl">
       
          <Box sx={{ display: 'flex', alignItems: 'center' }}>
            <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
              {pages.map((page, index) => (
                <Button
                
                  key={index}
                  sx={{ mx: 2, color: 'black'}}
                >
                  
                 <Link to={page.toLowerCase()} smooth={true} duration={500} offset={offset}>
                      {page}
                 </Link>

                </Button>
              
              ))}
             
            </Box>
            <Box sx={{ display: { xs: 'block', md: 'none' } }}>
              <IconButton
                edge="end"
                color="black"
                aria-label="menu"
                onClick={openMenu}
              >
                <MenuIcon />
              </IconButton>
              <Menu
                anchorEl={menuAnchor}
                open={Boolean(menuAnchor)}
                onClose={closeMenu}
              >
                {pages.map((page, index) => (
                  <MenuItem
                    key={index}
                    onClick={() => {
                      closeMenu();
                      document
                        .getElementById(page.toLowerCase())
                        .scrollIntoView({ behavior: 'smooth', block: 'center' });
                    }}
                  >
                    {page}
                  </MenuItem>
                ))}
              </Menu>
            </Box>
          </Box>
        
      </Container>
    </AppBar>
  );
}

问题根源 #

1. 移动端未复用React-scroll的offset逻辑：小屏设备显示的下拉菜单，点击MenuItem时使用原生scrollIntoView方法并设置了block: 'center'，这会让目标元素滚动到视口中间而非开头，完全没用到你定义的offset变量，自然偏离预期位置。
2. 硬编码offset值适配性差：直接用-90、-120这类固定数值，若Header在小屏实际高度发生变化（比如菜单展开时高度改变），或设备缩放比例不同，都会导致偏移计算不准。

解决方案 #

方案1：移动端菜单统一使用React-scroll的Link组件 #

把下拉菜单的MenuItem替换成React-scroll的Link，保持和大屏一致的滚动逻辑：

// 替换移动端MenuItem部分
{pages.map((page, index) => (
  <MenuItem key={index} onClick={closeMenu}>
    <Link 
      to={page.toLowerCase()} 
      smooth={true} 
      duration={500} 
      offset={offset}
      style={{ textDecoration: 'none', color: 'inherit', width: '100%' }}
    >
      {page}
    </Link>
  </MenuItem>
))}

方案2：原生scrollIntoView中手动处理偏移 #

如果不想改用React-scroll，可在原生方法中计算实际偏移量，避免block: 'center'的影响：

onClick={() => {
  closeMenu();
  const targetElement = document.getElementById(page.toLowerCase());
  const headerHeight = document.querySelector('.navbar').offsetHeight;
  const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight;
  
  window.scrollTo({
    top: targetPosition,
    behavior: 'smooth'
  });
}}

方案3：动态获取Header实际高度替代硬编码 #

把useEffect里的固定offset值改成获取Header的实际高度，适配不同屏幕下的高度变化：

useEffect(() => {
  const handleResize = () => {
    const headerHeight = document.querySelector('.navbar')?.offsetHeight || 90;
    setOffset(-headerHeight);
  };
  handleResize();
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

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