React：Material UI Dialog打开时启用页面背景滚动的实现方法

嘿，我来帮你搞定这个困扰！Material UI的Dialog组件默认会在打开时锁定页面滚动——哪怕你已经设置了hideBackdrop={true}隐藏遮罩层，这个滚动锁定的逻辑依然在生效。下面给你两种靠谱的解决方案：

方法一：使用官方提供的scrollLock属性（Material UI v5+） #

如果你用的是Material UI v5及以上版本，官方已经内置了控制滚动锁定的属性，直接在Dialog组件里添加scrollLock={false}就能轻松实现需求：

<Dialog
  open={open}
  onClose={handleClose}
  hideBackdrop={true}
  scrollLock={false} // 关键属性：禁用滚动锁定
>
  {/* Dialog内容 */}
</Dialog>

这个方法最简单也最推荐，因为是官方原生支持的，不会有额外的副作用。

方法二：手动控制body元素的overflow样式（兼容旧版本） #

如果你的项目用的是Material UI v4或更早的版本，没有scrollLock属性，可以通过监听Dialog的open状态，手动修改body的CSS overflow属性来实现滚动：

import { useEffect, useState } from 'react';
import Dialog from '@material-ui/core/Dialog'; // 或@mui/material/Dialog

export default function YourComponent() {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    // 保存body原本的overflow值，避免影响其他场景
    const originalBodyOverflow = document.body.style.overflow;
    
    if (open) {
      // 打开Dialog时允许body滚动
      document.body.style.overflow = 'auto';
    } else {
      // 关闭Dialog时恢复原本的overflow设置
      document.body.style.overflow = originalBodyOverflow;
    }

    // 组件卸载时确保恢复原始设置
    return () => {
      document.body.style.overflow = originalBodyOverflow;
    };
  }, [open]);

  return (
    <div>
      <button onClick={() => setOpen(true)}>打开Dialog</button>
      <Dialog
        open={open}
        onClose={() => setOpen(false)}
        hideBackdrop={true}
      >
        {/* Dialog内容 */}
      </Dialog>
    </div>
  );
}

这种方法需要注意及时恢复body的原始样式，防止在组件卸载或Dialog关闭后影响页面的正常滚动行为。

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