MUI Backdrop触发页面滚动至顶部问题及局部覆盖方案咨询

一、阻止Backdrop显示时滚动到顶部 #

滚动跳转到顶部通常是MUI Backdrop默认的自动聚焦逻辑导致的，可通过以下方式解决：

• 给Backdrop组件添加disableAutoFocus属性并设为true，禁用自动聚焦行为，避免触发页面滚动：

import Backdrop from '@mui/material/Backdrop';

<Backdrop
  open={open}
  disableAutoFocus={true}
  // 其他业务属性
>
  {/* Backdrop内部内容 */}
</Backdrop>

• 若上述方法无效，排查是否存在自定义代码在Backdrop显示时主动调用window.scrollTo(0, 0)这类滚动操作，直接移除即可。
• 如需锁定滚动但保留当前位置，可在Backdrop显示时记录滚动位置，关闭时恢复：

const [scrollY, setScrollY] = useState(0);
const [open, setOpen] = useState(false);

const handleOpen = () => {
  setScrollY(window.scrollY);
  // 若仅需锁定React应用内部滚动，替换为操作React根容器的overflow
  document.body.style.overflow = 'hidden';
  setOpen(true);
};

const handleClose = () => {
  document.body.style.overflow = '';
  window.scrollTo(0, scrollY);
  setOpen(false);
};

二、让Backdrop仅填充React应用 #

要让Backdrop只覆盖你的React根容器，需调整定位规则和样式：

1. 给React根容器添加position: relative样式，确保Backdrop能以它为定位基准：

/* 假设React根容器的类名为react-app-root */
.react-app-root {
  position: relative;
  /* 可根据需求添加高度、overflow等样式 */
}

2. 覆盖Backdrop的默认fixed定位，改为absolute并填充父容器：

<Backdrop
  open={open}
  sx={{
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    // 自定义背景透明度等样式
    backgroundColor: 'rgba(0, 0, 0, 0.4)',
  }}
  // 指定Portal挂载目标为React根容器
  container={document.querySelector('.react-app-root')}
>
  {/* Backdrop内部内容 */}
</Backdrop>

调整后Backdrop会仅填充你的React应用区域，而非整个网页。

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