打开Material UI Popover时阻止页面滚动的实现咨询

这里有两种可靠方案解决你的问题：

方案1：利用Popover内置滚动锁定 #

Popover基于Modal组件实现，通过modalProps传递配置开启滚动锁定，同时调整锚点参数让Popover固定在屏幕指定位置：

import { useState, useRef } from 'react';
import Popover from '@mui/material/Popover';

export default function FixedPopover() {
  const [open, setOpen] = useState(false);
  const anchorEl = useRef(null);

  const handleOpen = (event) => {
    anchorEl.current = event.currentTarget;
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <button onClick={handleOpen}>打开弹窗</button>
      <Popover
        open={open}
        anchorEl={anchorEl.current}
        onClose={handleClose}
        // 开启滚动锁定
        modalProps={{ disableScrollLock: false }}
        // 配置Popover固定在屏幕中央（可按需调整位置）
        anchorOrigin={{ vertical: 'center', horizontal: 'center' }}
        transformOrigin={{ vertical: 'center', horizontal: 'center' }}
      >
        <div style={{ padding: '16px' }}>固定在屏幕的Popover内容</div>
      </Popover>
    </div>
  );
}

方案2：手动控制页面滚动样式 #

如果内置方案不生效，直接监听Popover显示状态，修改body的overflow属性隐藏滚动条，同时强制Popover使用固定定位：

import { useState, useRef, useEffect } from 'react';
import Popover from '@mui/material/Popover';

export default function FixedPopover() {
  const [open, setOpen] = useState(false);
  const anchorEl = useRef(null);

  useEffect(() => {
    const body = document.body;
    // 根据弹窗状态切换body滚动样式
    body.style.overflow = open ? 'hidden' : '';
    // 组件卸载时恢复样式，避免遗留问题
    return () => { body.style.overflow = ''; };
  }, [open]);

  const handleOpen = (event) => {
    anchorEl.current = event.currentTarget;
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <button onClick={handleOpen}>打开弹窗</button>
      <Popover
        open={open}
        anchorEl={anchorEl.current}
        onClose={handleClose}
        // 强制Popover面板使用固定定位，不随页面滚动移动
        sx={{ '& .MuiPopover-paper': { position: 'fixed' } }}
      >
        <div style={{ padding: '16px' }}>固定不滚动的Popover内容</div>
      </Popover>
    </div>
  );
}

关键提示 #

• 若Popover随页面滚动偏移，核心原因是它默认基于锚点元素做相对定位，给MuiPopover-paper设置position: fixed就能强制固定在屏幕上。
• 手动修改body样式时，一定要加清理函数，防止组件卸载后页面一直无法滚动。

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