ProseMirror/Tiptap：如何在不获取焦点时实现ScrollIntoView功能？

针对你遇到的问题——设置无焦点选区后编辑器视图不自动滚动，且scrollIntoView命令无效，核心原因是该命令默认依赖编辑器焦点上下文。以下是两种直接有效的解决方法：

方法一：直接操作DOM节点滚动 #

利用ProseMirror提供的坐标转换工具，找到选区对应的DOM元素后直接调用原生滚动方法，完全不需要聚焦编辑器：

// 先通过无焦点方式设置目标选区（你已实现这一步）
editor.commands.setTextSelection(relevantPosition);

// 获取选区起始位置对应的DOM元素
const { node } = editor.view.domAtPos(editor.state.selection.from);
// 平滑滚动到该元素，可调整block参数控制对齐方式（center/start/end）
node.scrollIntoView({ behavior: 'smooth', block: 'center' });

方法二：通过事务Meta触发滚动 #

手动创建事务并添加scrollIntoView元数据，让ProseMirror视图主动处理滚动逻辑：

import { TextSelection } from 'prosemirror-state';

// 创建包含目标选区的事务
const tr = editor.state.tr.setSelection(
  TextSelection.create(editor.state.doc, relevantPosition)
);
// 添加滚动触发元数据
tr.setMeta('scrollIntoView', true);
// 分发事务更新视图
editor.view.dispatch(tr);

补充说明 #

如果你的项目基于Remirror这类ProseMirror封装库，第一种DOM直接操作的方式兼容性更好，因为它绕开了封装层的焦点校验逻辑，确保搜索框始终保持焦点的同时完成滚动。

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