点击导航栏login按钮后垂直滚动条消失问题求助

问题根源 #

点击登录按钮后滚动条消失，是因为你使用的Material-UI Menu组件在展开时，会自动给body元素添加overflow: hidden样式，以此阻止页面滚动，这就是导致滚动条异常消失的原因。

解决办法 #

方法一：禁用Menu的滚动锁定功能 #

直接给Menu组件添加disableScrollLock={true}属性，取消它对body滚动的锁定：

<Menu
  id="menu-appbar"
  anchorEl={anchorEl}
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'right',
  }}
  keepMounted
  transformOrigin={{
    vertical: 'top',
    horizontal: 'right',
  }}
  open={Boolean(anchorEl)}
  onClose={handleClose}
  disableScrollLock={true} // 添加该属性
>
  {/* 原有菜单选项内容 */}
</Menu>

这是最直接且推荐的方式，不会影响其他组件的正常行为。

方法二：强制保留body的滚动状态 #

如果不想修改组件属性，可以通过全局CSS强制覆盖默认行为：

body {
  overflow-y: auto !important;
}

注意：这种方式优先级较高，可能会影响其他需要锁定页面滚动的组件（比如模态框），谨慎使用。

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