如何阻止Ant Design Modal弹窗显示时页面自动滚动至顶部？

针对你使用Ant Design 4.22.8 + Next.js 12.3.4遇到的Modal弹窗触发后页面自动滚顶的问题，以下是几种可行的解决办法：

方法1：关闭scrollToFirstError属性 #

Ant Design Modal默认会在打开时尝试滚动到第一个错误表单控件，即便弹窗内没有表单，这个逻辑也可能导致页面意外滚顶。显式禁用该属性即可：

<Modal 
  visible={isModalVisible} 
  title={title} 
  onOk={handleOk} 
  onCancel={handleCancel}
  scrollToFirstError={false}
>
  <div>Content</div>
</Modal>

方法2：指定Modal挂载容器 #

Next.js的页面结构特性可能导致Modal默认挂载到document.body时引发滚动异常。你可以手动指定Modal挂载到当前组件的父容器，避免影响全局页面滚动：

import { useRef } from 'react';

function YourComponent() {
  const modalContainerRef = useRef(null);

  return (
    <div ref={modalContainerRef}>
      <Modal 
        visible={isModalVisible} 
        title={title} 
        onOk={handleOk} 
        onCancel={handleCancel}
        getContainer={() => modalContainerRef.current}
      >
        <div>Content</div>
      </Modal>
    </div>
  );
}

方法3：手动控制页面滚动状态 #

在Modal打开前记录当前滚动位置，锁定页面滚动；关闭时恢复滚动位置并解锁页面：

import { useState } from 'react';

function YourComponent() {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [scrollPosition, setScrollPosition] = useState(0);

  const showModal = () => {
    setScrollPosition(window.scrollY);
    // 锁定页面滚动
    document.body.style.position = 'fixed';
    document.body.style.top = `-${scrollPosition}px`;
    setIsModalVisible(true);
  };

  const hideModal = () => {
    setIsModalVisible(false);
    // 恢复页面滚动
    document.body.style.position = '';
    document.body.style.top = '';
    window.scrollTo(0, scrollPosition);
  };

  return (
    <>
      <button onClick={showModal}>打开弹窗</button>
      <Modal 
        visible={isModalVisible} 
        title={title} 
        onOk={hideModal} 
        onCancel={hideModal}
        afterClose={hideModal}
      >
        <div>Content</div>
      </Modal>
    </>
  );
}

方法4：检查触发按钮的路由逻辑 #

如果触发Modal的按钮被Next.js的Link组件错误包裹，可能会意外触发空路由跳转，导致页面滚顶。确保按钮未被不必要的Link包裹：

// 错误写法：可能触发路由跳转
<Link href="#">
  <button onClick={showModal}>打开弹窗</button>
</Link>

// 正确写法
<button onClick={showModal}>打开弹窗</button>

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