textarea的scrollHeight异常累加增长，如何实现自适应内容高度？

问题描述 #

我希望textarea自适应到内容最小高度加上一点垂直内边距，编写了如下函数：

function resizeTextarea() {
    const textarea = document.getElementById('textarea');
    console.log(textarea.scrollHeight);
    textarea.style.height = textarea.scrollHeight + 100 + 'px';
}

但每次输入字符时，scrollHeight都会额外增长100px，无法正确获取内容的实际最小高度。

问题原因 #

核心问题是每次设置高度时都在当前scrollHeight基础上叠加了100px：

• 当textarea内容未超出可视范围时，scrollHeight等于元素的实际高度（包含你之前设置的额外100px）；
• 再次执行函数时，新的高度会变成「上一次的高度+100px」，导致scrollHeight被不断放大，陷入恶性循环。

正确实现方案 #

要获取内容的真实最小高度，需要先重置textarea的高度为auto，让浏览器重新计算内容的实际高度，再在此基础上添加额外内边距：

调整后的JavaScript代码 #

function resizeTextarea() {
    const textarea = document.getElementById('textarea');
    // 先重置高度，让scrollHeight回到内容的真实高度
    textarea.style.height = 'auto';
    // 设置为内容高度+所需的额外垂直间距（这里用10px示例，可按需调整）
    textarea.style.height = `${textarea.scrollHeight + 10}px`;
}

配套CSS优化 #

为了避免用户手动调整高度干扰自适应效果，建议给textarea添加以下样式：

textarea {
    resize: none; /* 禁用手动调整大小 */
    min-height: 40px; /* 设置初始最小高度 */
    padding: 8px; /* 基础内边距 */
    box-sizing: border-box; /* 确保内边距不会撑开元素宽度 */
}

这样每次输入内容时，函数会先重置高度，获取到内容的真实最小高度，再加上指定的额外间距，就能实现稳定的自适应效果。

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