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

Question

我的问题有点难以描述，所以我会尽力解释清楚。

我有一个文本区域，其CSS为#object{overflow:hidden;resize:none;}。我想防止它生成滚动条，同时又可以自动调整大小。这个文本区域与外部脚本的控制台同步，也就是说它会更新。然而，默认情况下，它会停留在顶部，除非你选中文本，将其拖到元素底部，这会是滚动的唯一方式，除了用箭头键以外。

从程序上讲，有没有办法让文本区域在更新时保持在底部？这样就可以自动滚动以适应其使用情况了。

- TERMtm

---

可能是如何将文本区滚动条设置为默认底部？的重复问题。 - Herohtar

Answer 1

您可以通过 JavaScript 来实现。使用以下代码将文本区域的 scrollTop 属性设置为 scrollHeight 属性即可：

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

- Ujjwal Manandhar

---

太棒了！谢谢。除了这个解决方案，其他都没用。节省了我的时间。非常感激。 - John Dover

Answer 2

通过使用jQuery，你可以使用以下代码来检测textarea的内容变化:

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

使用以下代码可以滚动到底部：

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

本代码摘自jquerybyexample.blogspot.com。

- Adam Bailin

---

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

不同意，我喜欢jQuery的解决方案:D - ecbrodie

@ecbrodie 对你来说很好，但对所有人来说都不是最好的选择。语法约定糟糕，与现今大多数其他代码库不匹配。 - Alex

@Alex 你也意识到我在八年前发布了这个评论，对吗？自那时以来，JavaScript生态系统发生了巨大变化。而且我至少四年没有使用jQuery了，因为现在有许多替代品。我认为把我维持如此久远的立场是不合理的。 - ecbrodie

Answer 3

使用JavaScript

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

使用Jquery

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

- ViPuL5

---

派对结束了一会儿，但我还是给你点赞。希望你不介意这有点脆哦。 ;) - TERMtm

Answer 4

通用JQuery插件

这是一个通用的JQuery插件，用于滚动至任何元素的底部：

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

用法：

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

- Roland

---

简洁明了，按照广告所述的工作。 - qxotk

Answer 5

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

每次文本区域的内容发生变化时，请调用此函数。如果您无法编辑外部影响，请使用setInterval定期激活此函数。

- Rob W