本文介绍一种轻量级 JavaScript 解决方案，通过监听 cut、historyUndo 和 historyRedo 事件并触发 textarea 的 blur/focus 操作，强制浏览器在编辑操作后自动滚动至光标位置，从而消除滚动错位问题。

本文介绍一种轻量级 javascript 解决方案，通过监听 `cut`、`historyundo` 和 `historyredo` 事件并触发 textarea 的 blur/focus 操作，强制浏览器在编辑操作后自动滚动至光标位置，从而消除滚动错位问题。

在具有 overflow-y: auto 和固定高度限制（如 max-height: 500px）的 中，当用户滚动至视口外区域进行文本剪切（Ctrl+X）、撤销（Ctrl+Z）或重做（Ctrl+Y）操作时，浏览器常因内部渲染时机问题导致滚动位置“跳跃”——光标实际所在行不可见，甚至被卷动到底部。根本原因在于：这些原生编辑操作不会主动触发滚动同步，而 DOM 更新与视图重绘存在微小延迟。

以下是一段简洁、兼容性良好且无需依赖外部库的修复代码：

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const textareas = document.querySelectorAll('textarea');
        textareas.forEach(textarea => {
            // 响应剪切操作
            textarea.addEventListener('cut', () => jumpToCaret(textarea));

            // 响应撤销/重做（需检查 inputType）
            textarea.addEventListener('input', (e) => {
                if (e.inputType === 'historyUndo' || e.inputType === 'historyRedo') {
                    jumpToCaret(textarea);
                }
            });
        });
    });

    function jumpToCaret(textarea) {
        // 使用 setTimeout(0) 将 focus 操作推入下一个宏任务队列，
        // 确保 DOM 已完成本次编辑更新后再执行滚动定位
        setTimeout(() => {
            textarea.blur();
            textarea.focus();
        }, 0);
    }
</script>

✅ 关键原理说明：

• textarea.focus() 在获得焦点时，浏览器自动滚动至光标当前位置（包括换行包裹产生的视觉行），这是原生行为，无需手动计算坐标；
• blur() + focus() 组合可绕过部分浏览器对“当前已聚焦元素重复 focus”的优化忽略；
• setTimeout(..., 0) 是必要步骤：它确保操作发生在当前事件循环之后，避开编辑操作尚未完全提交到 DOM 的竞态窗口（例如 input 事件触发时，值可能还未最终反映在渲染层）。

⚠️ 注意事项：

• 请将脚本置于