React Vite+React Router Dom点击NavLink后滚动条消失求助

1. 修复导航链接的事件冒泡问题 #

你的导航栏中，部分NavLink被包裹在带有onClick={() => setMobileOpen(true)}的div内。点击这些NavLink时，事件会冒泡到父元素，触发移动端菜单打开逻辑——而通常移动端菜单会设置body的overflow: hidden禁止背景滚动，这正是滚动条消失的核心原因。

修复方法：给该div内的所有NavLink添加事件阻止冒泡处理：

<NavLink
  onClick={(e) => e.stopPropagation()} // 新增此行
  className={({ isActive }) => isActive ? classes.activeNavbarStyle : undefined}
  to="/"
>
  Home
</NavLink>

阻止事件冒泡后，点击导航链接不会触发移动端菜单打开，自然不会出现滚动条被隐藏的情况。

2. 路由切换时强制重置滚动样式 #

如果上述方法无效，可能是视差组件或其他页面元素修改了body滚动样式但未在路由切换时重置。可以在App.jsx的useEffect中强制恢复：

useEffect(() => {
  window.scrollTo(0, 0);
  // 强制恢复body和html的滚动属性
  document.body.style.overflow = 'auto';
  document.documentElement.style.overflow = 'auto';
}, [pathname]);

3. 检查视差组件的生命周期清理 #

若页面使用了React Scroll Parallax，部分视差效果可能在挂载时设置body的overflow: hidden。需确保组件卸载时重置样式：

// 在使用视差的组件中添加
useEffect(() => {
  // 挂载时的样式设置（如果有）
  return () => {
    // 卸载时恢复滚动
    document.body.style.overflow = 'auto';
  };
}, []);

4. 验证移动端菜单的样式逻辑 #

检查移动端菜单的样式控制逻辑，确保菜单关闭时（mobileOpen为false），body的overflow属性被正确恢复：

useEffect(() => {
  document.body.style.overflow = mobileOpen ? 'hidden' : 'auto';
}, [mobileOpen]);

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