文本区域自动滚动到底部

Posted 2023-05-07

【中文标题】文本区域自动滚动到底部

【英文标题】：Textarea auto-scroll to the bottom

【发布时间】：2014-12-20 20:42:12

【问题描述】：

我有一个文本区域，我用textarea.value += "more text\n"; 将数据附加到它，我希望它“保持”滚动到底部，所以它总是显示最后一行。

我已经读到我应该这样做：

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

但我试过了 (http://jsfiddle.net/BenjiWiebe/mya0u1zo/)，但我无法让它工作。

我做错了什么？

【问题讨论】：

How to have a textarea to keep scrolled to the bottom when updated的可能重复

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

【参考方案1】：

每次追加文字时都需要设置scrollTop：

var textarea = document.getElementById('textarea_id');
setInterval(function()
    textarea.value += Math.random()+'\n';
    textarea.scrollTop = textarea.scrollHeight;
, 1000);

http://jsfiddle.net/mya0u1zo/2/

【讨论】：

好的，那么有没有办法让它“粘”在底部？因为我的代码中有多个附加文本的地方......虽然我想我可以创建一个函数append_text......

【参考方案2】：

回答最初的问题：由于您的字符串输出以换行符结尾，因此您应该在输出之前滚动，而不是之后（我将我的 id 保存在一个名为 id 的对象中）：

function Output(Msg)
  
  ...
  id.Log.scrollTop=id.Log.scrollHeight;
  SetValue('Log',out);