Question

我的问题有点偏离了袖口，所以我会尽力解释这个。

我有一个文字区域，有#object{overflow:hidden;resize:none;}的CSS。我试图阻止它产生滚动条，同时也调整自己的大小。此textarea与外部脚本的控制台同步，这意味着它会更新。但是，默认情况下，它将保持在顶部，除非您突出显示文本，拖动到元素的底部。这自然是向下滚动而不是使用箭头键的唯一方法。

以编程方式，有没有办法在更新时将文本区域保持在底部？让它自动滚动以适应其用例会很好。

Answer 1

你可以通过javascript来做到这一点。使用scrollTop属性设置文本区域的scrollHeight属性，如下所示：

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插件

这里是任何元素的scrollBottom的通用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;
   }
}

每次更改textarea的内容时调用此函数。如果无法编辑外部影响，请使用setInterval定期激活此功能。

如何让textarea在更新时保持滚动到底部

5 个答案: