为什么我们在将 textarea 高度设置为等于其 scrollHeight 之前将其设置为“0px”以自动调整 textarea 的大小？

Question

我正在使用中的代码并针对我的问题对其进行修改（主要是将 element.style.height = "5px" 替换为 element.style.height = "0px"）。我的问题是为什么我们甚至需要在使用 scrollHeight 设置高度之前重置 textarea 高度？

function auto_grow(element) {
    element.style.height = "0px"; // why do we even need this line ?
    element.style.height = (element.scrollHeight)+"px";
}

<textarea oninput="auto_grow(this)"></textarea>

这行 element.style.height = "0px" 确实给出了奇怪的行为，正如下面的代码片段运行所见，但这是什么原因造成的？当文本区域高度未在 oninput 处理程序中重置时，scrollHeight 属性是否以不同的方式计算其值？

function auto_grow(element) {
    console.log(`Before- ${element.scrollHeight}`);
    // element.style.height = "0px";
    element.style.height = (element.scrollHeight)+"px";
    console.log(`After- ${element.scrollHeight}`);
}

<textarea
  oninput="auto_grow(this)"></textarea>

Answer 1

发生了几件事。 textarea 以初始内容高度、2px 的填充（在所有边上，但特别是对于这种情况，顶部和底部）和 content-box 的框大小开始。

接下来要了解的是如何计算元素的滚动高度。它是从 scrolling area 的上边缘到下边缘。顶部边缘是其填充框的顶部边缘。底边定义为

The bottom-most edge of the element’s bottom padding edge and the bottom margin edge of all of the element’s descendants' boxes, excluding [not relevant in this case].

文本内容生成后代框，所以这意味着当您测量文本区域的滚动高度时，这是顶部填充的高度加上现有设置的内容高度+底部填充和文本高度的最大值。

通过首先将内容高度设置为 0px，它会将 scrollHeight 减小为顶部填充的高度加上底部填充和文本高度的最大值，出于所有实际目的，它始终是文字.

因此最终的内容高度集将始终设置为包含文本的高度加上顶部填充。

为什么我们在将 textarea 高度设置为等于其 scrollHeight 之前将其设置为“0px”以自动调整 textarea 的大小？

Why do we set textarea height to '0px' before setting it equal to its scrollHeight in order to auto size the textarea?

html

javascript

dom

textarea