如何让textarea的scrollHeight在高度重置后适配外部滚动条引发的换行

核心问题出在浏览器布局更新时机与JS同步执行的冲突：当你设置height: auto后，浏览器不会立刻重新计算textarea的换行布局和scrollHeight，同步读取的scrollHeight还是旧值，最终导致高度设置错误。

解决方案：延迟读取scrollHeight，等待浏览器完成重排重绘 #

以下两种方式都能可靠解决这个问题：

1. 使用requestAnimationFrame延迟获取scrollHeight

把读取scrollHeight的逻辑放到下一次浏览器重绘前执行，确保布局已更新：

function resizeTextarea(textarea) {
  // 重置高度为auto
  textarea.style.height = 'auto';
  // 延迟到重绘前读取正确的scrollHeight
  requestAnimationFrame(() => {
    textarea.style.height = `${textarea.scrollHeight}px`;
  });
}

2. 手动触发浏览器重排（同步方式）

通过读取会触发重排的DOM属性（比如offsetHeight），强制浏览器立即更新布局，再读取scrollHeight：

function resizeTextarea(textarea) {
  textarea.style.height = 'auto';
  // 读取offsetHeight触发重排，让浏览器更新布局
  textarea.offsetHeight;
  // 此时读取的scrollHeight是换行后的正确值
  textarea.style.height = `${textarea.scrollHeight}px`;
}

额外注意事项 #

• 确保textarea的box-sizing设置为border-box，避免padding和border的高度干扰计算：

  textarea {
    box-sizing: border-box;
    overflow-y: hidden;
    /* 其他自定义样式 */
  }
  

• 你的ResizeObserver能正确捕捉textarea宽度变化，这部分逻辑无需调整。

内容的提问来源于stack exchange，提问作者Samuel Gfeller