Material UI(MUI) Dialog组件中scrollTop功能失效问题如何解决？

问题根因 #

该问题本质是操作的滚动节点错误、或操作时机早于DOM挂载完成导致的，常见踩坑场景如下：

• MUI Dialog的内部滚动能力默认由DialogContent组件提供，直接操作Dialog外层容器、未配置滚动属性的自定义容器都会无效果
• 绑定的ref指向React组件实例而非原生DOM，会导致读取scrollTop返回undefined
• 调用滚动操作时Dialog还在执行入场动画，对应DOM节点未完成挂载，ref值为null

修复方案 #

1. 正确绑定滚动容器ref #

优先给DialogContent绑定ref，如果你使用自定义滚动容器，需要额外给容器设置固定高度+overflow-y: auto属性，示例代码：

import { useRef } from 'react';
import Dialog, { DialogContent } from '@mui/material/Dialog';

function FullScreenDialog() {
  const scrollContainerRef = useRef(null);

  const scrollToTarget = () => {
    if (!scrollContainerRef.current) return;
    // 直接修改scrollTop值
    scrollContainerRef.current.scrollTop = 800;
    // 也可以用scrollTo方法实现平滑滚动
    // scrollContainerRef.current.scrollTo({
    //   top: 800,
    //   behavior: 'smooth'
    // })
  }

  return (
    <Dialog fullScreen open={true}>
      <DialogContent ref={scrollContainerRef}>
        {/* 长内容区域 */}
        <button onClick={scrollToTarget}>跳转到指定位置</button>
      </DialogContent>
    </Dialog>
  )
}

2. 调整滚动操作时机 #

如果需要在Dialog打开时自动滚动，不要在修改open状态后立即执行滚动，通过Dialog的onEntered回调在入场动画完全结束后执行操作：

<Dialog
  fullScreen
  open={openState}
  onEntered={() => {
    scrollContainerRef.current?.scrollTo({ top: 0 })
  }}
>
  {/* 对话框内容 */}
</Dialog>

3. 全局滚动场景处理 #

如果手动给Dialog配置了disableScrollLock属性，滚动容器会切换为全局body，此时需要操作全局滚动属性：

const targetScrollTop = 1200;
document.documentElement.scrollTop = targetScrollTop;
document.body.scrollTop = targetScrollTop;

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