当用户在带垂直滚动条的 中执行剪切、撤销或重做操作时，浏览器常会错误地滚动到底部，而非保持光标位置可见；本文提供一个轻量、兼容性好且无需计算行高或坐标的核心解决方案。

当用户在带垂直滚动条的 `` 中执行剪切、撤销或重做操作时，浏览器常会错误地滚动到底部，而非保持光标位置可见；本文提供一个轻量、兼容性好且无需计算行高或坐标的核心解决方案。

在具有 overflow-y: auto 和限定高度（如 max-height: 500px）的 中，原生浏览器行为对 cut、undo 和 redo 操作缺乏精准的滚动锚定逻辑——尤其当光标位于长文本中部且视口已滚动时，操作后焦点虽保留，但可视区域却意外跳转至底部或顶部，严重影响编辑体验。

根本原因在于：这些操作触发后，浏览器未主动将光标位置重新“对齐”到可视区域中心或顶部，而仅维持焦点状态。手动计算光标所在行号（需考虑换行符 \n、自动折行、字体度量、line-height 等）不仅复杂、易出错，且跨浏览器表现不一致，并非必要路径。

✅ 推荐解法：利用浏览器原生聚焦滚动机制，通过「失焦 + 重获焦」强制定位
浏览器在 .focus() 时，<strong>自动将光标所在位置滚动至可视区域（通常为顶部附近）</strong>。我们只需在关键操作后触发该行为即可：

<textarea style="
  width: 300px;
  min-height: 105px;
  max-height: 500px;
  overflow-y: auto;
  line-height: 20px;
  font-family: system-ui, sans-serif;
"></textarea>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const textareas = document.querySelectorAll('textarea');
    textareas.forEach(textarea => {
      // 剪切时立即恢复光标可视位置
      textarea.addEventListener('cut', () => jumpToCaret(textarea));

      // 撤销/重做通过 input 事件捕获（现代浏览器支持 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>

? 关键细节说明：

• setTimeout(..., 0) 不可省略：若直接同步调用 blur() + focus()，可能因浏览器尚未完成内部光标状态更新而导致滚动无效；该延迟确保操作发生在渲染队列之后，是稳定生效的前提。
• 兼容性保障：inputType 在 Chrome/Firefox/Edge（≥79）中可靠支持 historyUndo/historyRedo；若需支持旧版 IE，可降级监听 keydown 组合键（如 Ctrl+Z/Ctrl+Y），但现代项目中推荐以 input 事件为主。
• 无侵入、零依赖：不修改 CSS、不引入额外库、不解析文本布局，仅用 15 行核心 JS 即可解决。

? 进阶提示：如需更精细控制（例如滚动至光标正中而非顶部），可结合 textarea.selectionStart 与 getBoundingClientRect() + scrollIntoView() 实现，但对绝大多数场景而言，blur/focus 方案已足够鲁棒、简洁且性能优异。

总之，与其陷入复杂的文本行高计算与像素定位，不如善用浏览器内置行为——让 focus() 成为你最可靠的滚动锚点。