如何解决可滚动文本域剪切撤销操作引起的滚动回弹问题？

本文共计868个文字，预计阅读时间需要4分钟。

当用户在带有``元素的页面中执行剪切、粘贴或重复操作时，浏览器可能会错误地将滚动条滚动到页面底部，而不会保持光标位置可见。以下是一个轻量级、兼容性好且无需计算行的核心解决方案：

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

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

✅ 推荐解法：利用浏览器原生聚焦滚动机制，通过「失焦 + 重获焦」强制定位
浏览器在 <textarea>.focus() 时，自动将光标所在位置滚动至可视区域（通常为顶部附近）。