Javascript 更新时如何让文本区域保持滚动到底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7373081/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to have a textarea to keep scrolled to the bottom when updated
提问by TERMtm
My problem is a bit off the cuff here, so I'll try to explain this best I can.
我的问题在这里有点不合时宜，所以我会尽力解释这一点。
I have a text area, having css of #object{overflow:hidden;resize:none;}. I am trying to prevent it from spawning scroll bar while also resizing itself. This textarea is synced with an external script's console meaning it updates. By default however, it will stay at the top unless you highlight text, dragging off to the bottom of the element. This would be the only way to scroll down other than with arrow keys, naturally.
我有一个文本区域，css 为#object{overflow:hidden;resize:none;}. 我试图防止它产生滚动条，同时也调整自己的大小。此文本区域与外部脚本的控制台同步，这意味着它会更新。但是，默认情况下，它会停留在顶部，除非您突出显示文本，并将其拖到元素的底部。自然，这将是除使用箭头键外向下滚动的唯一方法。
Programmatically, is there any way to keep the text area down to the bottom upon updating? It would be nice to have it auto-scroll to accommodate its use case.
以编程方式，有没有办法在更新时将文本区域保持在底部？让它自动滚动以适应其用例会很好。
回答by Ujjwal Manandhar
You can do it by javascript. Set the scrollTopproperty of text area with scrollHeightproperty like below:
您可以通过 javascript 来完成。使用如下scrollTop属性设置文本区域的scrollHeight属性：
document.getElementById("textarea").scrollTop = document.getElementById("textarea").scrollHeight
回答by Adam Bailin
By using jQuery, you can find out when the content of the textareachanges using:
通过使用 jQuery，您可以使用以下方法找出textarea更改的内容：
$("#object").change(function() {
scrollToBottom();
});
And scroll to the bottom using:
并使用以下方法滚动到底部：
function scrollToBottom() {
$('#object').scrollTop($('#object')[0].scrollHeight);
}
Scroll code taken from jquerybyexample.blogspot.com.
滚动代码取自jquerybyexample.blogspot.com。
回答by ViPuL5
Using Javascript
使用 JavaScript
var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;
Using Jquery
使用 Jquery
$('#textarea_id').scrollTop($('#textarea_id')[0].scrollHeight);???
回答by Roland
Generic JQuery Plugin
通用 JQuery 插件
Here a generic jquery plugin for scrollBottom of any element:
这是用于任何元素的 scrollBottom 的通用 jquery 插件：
$.fn.scrollBottom = function() {
return $(this).scrollTop($(this)[0].scrollHeight);
};
usage:
用法：
$("#logfile").val( $("#logfile").val() + "this is new line test\n" ).scrollBottom();
回答by Rob W
function checkTextareaHeight(){
var textarea = document.getElementById("yourTextArea");
if(textarea.selectionStart == textarea.selectionEnd) {
textarea.scrollTop = textarea.scrollHeight;
}
}
Call this function every time when the contents of the textarea are changed. If you cannot edit the external influence, periodically activate this function using setInterval.
每次更改 textarea 的内容时调用此函数。如果您无法编辑外部影响，请使用 setInterval 定期激活此功能。
