Javascript 为什么scrollHeight与文本区域中的lineHeight*行不同？ 总结：

文本区域中的行数乘以行高与textarea元素的高度不一样，这是为什么

细节 我正在使用一个函数来调整AngularJs指令中的

textarea

元素的大小，我找到的答案是链接函数中解决方案的核心：

angular.module（'auto.resize'，[]）。指令（'autoResize'，['$timeout'，函数（$timeout）{
返回{
限制：“A”，
链接：功能链接（范围，elm）{
const resize=函数（）{
elm[0]。style.height=elm[0]。scrollHeight+“px”；
}
elm.on（“模糊键控更改”，调整大小）；
$timeout（调整大小）；
}
}
}]);

安格拉斯
元素的
滚动高度
会留下一些额外的填充（除了元素的实际
填充
之外），以便为文本中的任何升序或降序留出空间。这取决于特定的字体规格：


console.log（$（'a'）.prop（'scrollHeight'））
console.log（$（'b'）.prop（'scrollHeight'）
div{
填充：0；
线高：10px；
空白：预换行；/*模拟文本区域处理*/
}
#a{font-family:serif}
#b{font-family:monospace}

一
二
三
一
二
三
我认为真正的解决方案不是“额外填充”或其他神秘的东西，而是
行高小于字体渲染实际需要的空间

当增加
行高度
属性时，上面的示例效果很好：


console.log（$（'a'）.prop（'scrollHeight'））
console.log（$（'b'）.prop（'scrollHeight'）
div{
填充：0；
线高：20px；
空白：预换行；/*模拟文本区域处理*/
}
#a{font-family:serif}
#b{font-family:monospace}

一
二
三
一
二
三个
我意识到代码段不起作用，但我希望它们能够在代码段之外重现代码。更清楚地说，当你添加额外的换行符，然后触发监听器（比方说，使用一个keyup事件），然后它开始重新计算低于当前高度的高度，缩小它直到卷轴高度与实际高度匹配。我会回到链接问题中的答案，但我仍然好奇为什么它们不一样。我用来测试的文本很短，不会遇到您提出的问题（换行）@Pureferret抱歉，我完全误解了这个问题！我已经重写了答案来解释scrollHeight和lineHeight之间的差异。@Pureferret再次更新：TL；DR使用innerHeight而不是scrollHeight，这将按照您的预期运行。（谢谢你问这个问题，这需要一些研究——我今天学到了一些东西！：）噢，天哪，总有一些东西是不存在的：/