Material-UI Menu组件打开后抖动、菜单项向上晃动如何修复

问题根因 #

该抖动是Material UI v4版本Menu组件的常见问题，主要由两个核心原因触发：

1. 菜单打开时默认的滚动锁定逻辑会隐藏页面滚动条，触发页面整体重排
2. 菜单默认过渡动画的初始定位和最终定位存在计算差值，渲染过程中出现位置偏移

修复方案 #

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

• 方案1：禁用滚动锁定
  给Menu组件添加disableScrollLock={true}属性，关闭打开菜单时隐藏body滚动条的逻辑，避免页面宽度变化触发的重排抖动，修改后代码如下：

<Menu
  id="simple-menu"
  anchorEl={anchorEl}
  keepMounted
  open={Boolean(anchorEl)}
  onClose={handleClose}
  disableScrollLock={true}
>

该改法侵入性最低，适合页面滚动条显示隐藏不影响交互的场景。

• 方案2：固定菜单定位规则
  手动指定菜单的锚点位置和变换原点，覆盖默认的自动位置计算逻辑，避免动画过程中的位置跳变：

<Menu
  id="simple-menu"
  anchorEl={anchorEl}
  keepMounted
  open={Boolean(anchorEl)}
  onClose={handleClose}
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'left',
  }}
  transformOrigin={{
    vertical: 'top',
    horizontal: 'left',
  }}
>

该方案保留原有过渡动画效果，不会影响交互体验。

• 方案3：禁用过渡动画（兜底方案）
  如果上述两种方案都无法解决问题，直接关闭菜单的打开/关闭过渡动画，从根源上消除动画过程的位置变化：

<Menu
  id="simple-menu"
  anchorEl={anchorEl}
  keepMounted
  open={Boolean(anchorEl)}
  onClose={handleClose}
  transitionDuration={0}
>

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