文本区域的滚动高度增加不一致的问题

Question

这个问题不是很容易解释，所以如果这个问题让你感到困惑，我很抱歉。

基本上，我有一个<textarea>，它的高度根据它的值而变化。如果有任何垂直溢出(通常会产生垂直滚动条)，我增加<textarea>的高度以匹配其scrollHeight属性。对于前两行，这似乎工作得很好，但是当添加更多文本时，我注意到scrollHeight增加的点对于每行文本是不同的。

下面是演示奇怪行为的小提琴:http://jsfiddle.net/2zpkf6fL/2/

输入5或6行文本，你就会明白我在说什么了。

谁能解释一下这个问题?为什么不同行的scrollHeight在不同的点增加?

Answer 1

我是这样做的。

HTML:

    <div class="textarea-container">
  <textarea></textarea>
  <div class="textarea-size"></div>
</div>

CSS:

.textarea-container {
  position: relative;
  /* you should change this*/
  width: 50%;
}
textarea, .textarea-size {
  min-height: 25px;
  /* need to manually set font and font size */
  font-family: sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  padding: 4px;
  border: 1px solid;
  overflow: hidden;
  width: 100%;
}
textarea {
  height: 100%;
  position: absolute;
  resize:none;
  /*
  "pre" or "preline" or "normal" fixes Chrome issue where
    whitespace at end of lines does not trigger a line break.
  However, it causes the text to exhibit the behavior seen with
    "pre" that is described below.
   */
  white-space: normal;
}
.textarea-size {
  visibility: hidden;
  /*
  Pre-wrap: preserve spacing and newlines, but wrap text.
  Pre: preserve spacing and newlines but don't wrap text.
  "pre" does not wrap well on Firefox, even with word-wrap:break-word.
  "pre" on Chrome works with word-wrap, but exhibits different behavior:
  Instead of entire words being moved to the next line for wrapping,
  the browser will cut words in the middle for wrapping.
  "pre-line" has Firefox issues
  */
  white-space: pre-wrap;
  /* Required for wrapping lines in Webkit,
    but not necessary in Firefox if you have white-space wrapping
    (pre-wrap, normal, pre-line) already set */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

脚本:

var textContainer, textareaSize, input;
var autoSize = function () {
  textareaSize.innerHTML = input.value + 'n';
};
document.addEventListener('DOMContentLoaded', function() {
  textContainer = document.querySelector('.textarea-container');
  textareaSize = textContainer.querySelector('.textarea-size');
  input = textContainer.querySelector('textarea');
  autoSize();
  input.addEventListener('input', autoSize);
});