为何设置textarea.style.height = scrollHeight+'px'可实现文本框自适应高度？

你的代码之所以能生效，核心在于scrollHeight这个属性的特性：

• scrollHeight是元素内容的总高度，包含所有超出当前可视区域的内容（也就是原本需要滚动才能看到的部分），它会自动随着textarea内的文本内容增加而变大。
• 当textarea的默认高度不足以容纳所有文本时，scrollHeight的值会大于textarea当前的显示高度。你每次按键后把元素的style.height设置为scrollHeight，本质上就是让textarea的高度刚好匹配内容的总高度，自然就实现了“自动展开”的效果。

举个实际场景：

1. 初始状态下，textarea是空的，scrollHeight等于它的默认高度，设置后高度不变。
2. 当你输入的文本行数超过textarea默认显示的行数时，内容会被隐藏一部分，此时scrollHeight会计算出所有内容的总高度。
3. 把height设为这个scrollHeight，textarea就会被拉长到刚好能显示全部内容的高度，不需要手动去递增数值——因为scrollHeight已经帮你算好了当前内容需要的总高度。

另外补充个小细节：如果要让这个效果更完美，最好先把textarea的高度重置为auto再设置scrollHeight，不然删除内容时textarea不会自动收缩。比如修改成这样：

const expandTextArea = (element) => {
  const textarea = element.target;
  textarea.style.height = "auto";
  textarea.style.height = textarea.scrollHeight + "px";
}

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