如何让文本区域在更新时保持滚动到底部

Question

我的问题有点即兴，所以我会尽力解释这一点。

我有一个文本区域，其 css 为 #object{overflow:hidden;resize:none;}。我试图防止它产生滚动条，同时也调整自身大小。该文本区域与外部脚本的控制台同步，这意味着它会更新。但默认情况下，除非您突出显示文本，否则它将保留在顶部，并将其拖到元素的底部。当然，这将是除了使用箭头键之外向下滚动的唯一方法。

以编程方式，有什么方法可以在更新时将文本区域保持在底部吗？如果能够自动滚动以适应其用例，那就太好了。

Answer 1

你可以通过 JavaScript 来完成。使用 scrollHeight 属性设置文本区域的 scrollTop 属性，如下所示：

document.getElementById("textarea").scrollTop = document.getElementById("textarea").scrollHeight 

Answer 2

通过使用 jQuery，您可以使用以下方法了解 textarea 的内容何时发生变化：

$("#object").change(function() {
  scrollToBottom();
});

并使用以下方法滚动到底部：

function scrollToBottom() {
  $('#object').scrollTop($('#object')[0].scrollHeight);
}

滚动代码取自 jquerybyexample.blogspot.com。

Answer 3

使用 Javascript

var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;

使用 Jquery

$('#textarea_id').scrollTop($('#textarea_id')[0].scrollHeight);​​​

Answer 4

通用 JQuery 插件

这里有一个通用的 jquery 插件，用于任何元素的滚动底部：

$.fn.scrollBottom = function() {
  return $(this).scrollTop($(this)[0].scrollHeight);
};

用法：

$("#logfile").val( $("#logfile").val() + "this is new line test\n" ).scrollBottom();

Answer 5

function checkTextareaHeight(){
   var textarea = document.getElementById("yourTextArea");
   if(textarea.selectionStart == textarea.selectionEnd) {
      textarea.scrollTop = textarea.scrollHeight;
   }
}

每次当文本区域的内容改变时调用该函数。如果无法编辑外部影响，请使用 setInterval 定期激活此功能。