为何在设置textarea高度为scrollHeight实现自适应前需先将其高度重置为0px？

嘿，这个问题问得非常到位！让我来给你彻底拆解清楚这行代码的必要性：

首先，我们得先搞懂**scrollHeight属性到底是怎么计算的**：
scrollHeight是浏览器用来表示元素内容总高度的属性，包括那些因为元素高度不够而溢出的部分。但有个关键细节：当元素的当前高度足够完全容纳所有内容时，scrollHeight会等于元素的clientHeight（也就是元素的可视高度，包含内边距），而不是内容实际需要的最小高度。

接下来看你的场景：
假设你输入了几行文字，auto_grow函数把textarea的高度设为了scrollHeight（比如60px），刚好能容纳所有内容。这时候如果你删除大部分内容，只剩1行文字，正常来说textarea应该收缩到1行的高度（比如20px），但如果没有那行element.style.height = "0px"：

• 此时textarea的style.height还是60px，1行内容完全能被容纳，没有溢出
• 这时候scrollHeight会等于textarea当前的可视高度（60px），而不是内容实际需要的20px
• 你再执行element.style.height = scrollHeight + "px"，结果还是把高度设为60px，textarea根本不会收缩，这就是你看到的异常行为！

那加上element.style.height = "0px"之后发生了什么？
这行代码强制把textarea的高度重置为0，此时不管内容多少，都会完全溢出textarea的可视区域。这时候浏览器就会准确计算出内容实际需要的总高度（包括所有换行、内边距等），并把这个值赋给scrollHeight。接着再把textarea的高度设为这个scrollHeight，就能完美匹配内容的真实高度——不管是输入内容增高，还是删除内容收缩，都能正常工作。

你可以用你的测试代码验证一下：
打开浏览器控制台，当你输入多行再删除时，如果注释掉重置行，会看到Before-后面的scrollHeight始终等于之前的高度值；而如果保留重置行，Before-的scrollHeight会准确显示内容实际需要的高度，之后设置的高度也会跟着变化。

简单来说，这行重置代码的核心作用就是触发内容溢出，让scrollHeight能准确计算出内容的真实高度，而不是被元素当前的高度“误导”。

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