Ant Design表单scrollToFirstError滚动时标签不可见，如何添加偏移？

可以通过以下两种方式添加偏移量，确保滚动时标签也能显示：

方法一：直接设置滚动偏移量 #

将scrollToFirstError从布尔值改为包含top偏移量的配置对象，根据标签的实际高度调整偏移数值：

<Form
  form={form}
  name="addBasicProjectInfo"
  onFinish={onFinish}
  autoComplete="off"
  layout="vertical"
  colon={false}
  className="flex flex-col gap-7"
  scrollToFirstError={{ top: 80 }} // 偏移量根据标签高度自行调整
>

方法二：自定义滚动函数（更精准控制） #

如果默认偏移配置不满足需求，可以自定义滚动逻辑，定位到包含标签的Form.Item容器，确保标签完全可见：

<Form
  form={form}
  name="addBasicProjectInfo"
  onFinish={onFinish}
  autoComplete="off"
  layout="vertical"
  colon={false}
  className="flex flex-col gap-7"
  scrollToFirstError={(node) => {
    // 找到包含标签的Form.Item父容器
    const formItemContainer = node.closest('.ant-form-item');
    if (formItemContainer) {
      formItemContainer.scrollIntoView({
        behavior: 'smooth',
        block: 'start' // 容器顶部对齐视口顶部
      });
      // 若仍有遮挡，手动调整滚动位置
      window.scrollBy(0, -20);
    } else {
      node.scrollIntoView({ behavior: 'smooth' });
    }
  }}
>

注意事项 #

• 偏移数值需要根据你的页面布局（比如导航栏高度、标签高度）实际调整；
• 若自定义了Form.Item的className，需要修改closest中的选择器匹配实际容器类名。

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