Estoy usando el código de https://stackoverflow.com/a/24676492/4997994 y modificándolo para mi pregunta (principalmente reemplazando element.style.height = "5px" con element.style.height = "0px" ). Mi pregunta es ¿por qué necesitamos restablecer la altura del área de texto antes de establecer su altura con su scrollHeight?
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> Da un comportamiento extraño con esta línea element.style.height = "0px" comentada como se puede ver al ejecutar el fragmento de código a continuación, pero ¿qué está causando esto? ¿El atributo scrollHeight calcula su valor de una manera diferente cuando la altura del área de texto no se restablece en el controlador de entrada?
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>Están pasando un par de cosas. El área de texto comienza con una altura de contenido inicial, un relleno de 2px (en todos los lados, pero específicamente para este caso, arriba y abajo) y un tamaño de cuadro de cuadro de contenido.
Lo siguiente que hay que entender es cómo se calcula la altura de desplazamiento de un elemento. Va desde el borde superior del área de desplazamiento hasta el borde inferior. El borde superior es el borde superior de su caja de relleno. El borde inferior se define como
El borde más inferior del borde de relleno inferior del elemento y el borde del margen inferior de todos los cuadros de los descendientes del elemento, excluyendo [no relevante en este caso].
El contenido del texto genera cuadros descendientes, por lo que esto significa que cuando mide la altura de desplazamiento del área de texto, esa es la altura del relleno superior más el máximo del conjunto existente de altura del contenido + relleno inferior y la altura del texto.
Al establecer primero la altura del contenido en 0px, reduce esa altura de desplazamiento a la altura del relleno superior más el máximo del relleno inferior y la altura del texto, que para todos los propósitos prácticos siempre será la altura del texto.
Por lo tanto, el conjunto de altura del contenido final siempre se establecerá en la altura del texto contenido más el relleno superior.