单击按钮附加的文本区域值不滚动

Question

我有一个将文本附加到文本区域的按钮，但更新的文本在底部溢出时不会向上滚动。但是，如果我直接在文本区域中键入，它可以很好地滚动。我该如何解决这个问题？

$('#add-click').click(function() {
  let myVal = $("textarea").val();
  $("textarea").val(myVal+"Some text.");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea rows="4" cols="50"/></textarea>
<button id="add-click">Insert text</button>

https://codepen.io/rajndev/pen/YzERLgO

Answer 1

您可以使用 jQuery scrollHeight 和 scrollTop

来实现

$('#add-click').click(function() {
  let myVal = $("textarea").val();
  $("textarea").val(myVal+"add,add,add,add,add,add,add,add,");
  $("textarea").scrollTop($("textarea").get(0).scrollHeight)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea rows="4" cols="50"/></textarea>
<button id="add-click">Insert text</button>

单击按钮附加的文本区域值不滚动

Textarea value appended by button click does not scroll

html

scroll

textarea