启用滚动条后点击MUI Profile图标导航左移跳动如何修复

问题根因 #

MUI Menu 底层依赖 Modal 组件，Modal 默认开启了滚动锁定逻辑：打开时会给 <body> 设置 overflow: hidden 隐藏页面滚动条，页面可用宽度会增加一个滚动条的宽度，进而导致导航栏等全局布局向左偏移。

解决方案 #

你可以根据自己的业务场景选以下任意一种方案：

• 方案1：直接给当前Menu组件关闭滚动锁定（最推荐，无侵入）
  给你的Menu标签添加disableScrollLock={true}属性即可，修改后的代码如下：

  <Menu id={'menu'}
        anchorEl={anchorRef.current}
        open={Boolean(openMenu)}
        onClose={handleCloseAccount}
        disableScrollLock={true} // 新增这一行
  >
    {/* 原有内部内容不变 */}
  </Menu>
  

  这个配置会阻止Menu打开时隐藏页面滚动条，从根源上避免宽度变化导致的布局跳动。

• 方案2：全局强制保留滚动条
  在全局CSS中添加如下规则，让页面无论内容是否溢出都始终显示滚动条，不会出现宽度变化：

  body {
    overflow-y: scroll;
  }
  

• 方案3：全局配置MUI关闭所有Modal类组件的滚动锁定
  如果你项目中所有Dialog、Menu、Drawer等弹窗组件都不需要打开时锁定滚动，可以在MUI主题配置中统一修改默认行为：

  import { createTheme } from '@mui/material/styles';
  
  const theme = createTheme({
    components: {
      MuiModal: {
        defaultProps: {
          disableScrollLock: true,
        },
      },
    },
  });
  

注意事项 #

开启disableScrollLock后，菜单打开状态下用户滚动页面时，菜单会跟随锚点（你的头像按钮）一起移动，符合绝大多数导航栏用户菜单的交互逻辑，不会有体验问题。

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