当用户在带垂直滚动条的 中执行剪切、撤销或重做操作时，浏览器常会错误地滚动到底部，而非保持光标位置可见；本文提供一个轻量、兼容性好且无需计算行高或坐标的核心解决方案。
当用户在带垂直滚动条的 `
在具有 overflow-y: auto 和限定高度（如 max-height: 500px）的
根本原因在于：这些操作触发后，浏览器未主动将光标位置重新“对齐”到可视区域中心或顶部，而仅维持焦点状态。手动计算光标所在行号（需考虑换行符 \n、自动折行、字体度量、line-height 等）不仅复杂、易出错，且跨浏览器表现不一致，并非必要路径。
✅ 推荐解法：利用浏览器原生聚焦滚动机制，通过「失焦 + 重获焦」强制定位
浏览器在
<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() 成为你最可靠的滚动锚点。
