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

Posted 2023-05-07

【中文标题】更新时如何让文本区域保持滚动到底部

【英文标题】：How to have a textarea to keep scrolled to the bottom when updated

【发布时间】：2011-11-14 10:38:41

【问题描述】：

我的问题在这里有点离题，所以我会尽力解释这一点。

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

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

【问题讨论】：

How do I set textarea scroll bar to bottom as a default?的可能重复

【参考方案1】：

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

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

【讨论】：

爱它！谢谢。除了这个解决方案外，没有任何效果。节省了我的时间。非常感谢。

【参考方案2】：

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

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

并使用以下命令滚动到底部：

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

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

【讨论】：

谢谢，但我写了我所有的“低级代码”，除了我自己的以外，不使用任何库。

不同意，我喜欢 jQuery 解决方案：D

@ecbrodie 对你有好处，但无论如何都不适合所有人，糟糕的语法约定现在与大多数其他代码库都不匹配

@Alex 你也意识到我八年前发表了这条评论，对吧？从那时起，JavaScript 生态系统发生了巨大变化。我也至少有 4 年没用过 jQuery 了，因为现在有很多替代品。我认为让我坚持很久以前的立场是不合理的。

【参考方案3】：

使用 Javascript

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

使用 Jquery

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

【讨论】：

派对刚刚结束，但有一个赞成票。希望你不介意它有点脆。 ;)

【参考方案4】：

通用 JQuery 插件

这里是任何元素的 scrollBottom 的通用 jquery 插件：

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

用法：

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

【讨论】：

简洁，像宣传的那样工作。

【参考方案5】：

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

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