如何设置 textarea 的 scrollTop 值？答案

【问题标题】：How to set the scrollTop value for a textarea?如何设置 textarea 的 scrollTop 值？
【发布时间】：2012-03-08 21:26:36
【问题描述】：

当我尝试为 textarea 设置 scrollTop 值时遇到问题。我的 JavaScript 代码如下 -

 var element =  document.getElementById("messageTextArea");
 console.log("scrollTop = "+element.scrollTop);
 console.log("scrollHeight = "+element.scrollHeight);
 element.scrollTop = element.scrollHeight; // doesn't work!

 console.log("The value is-->"+element.scrollTop); // no change!

 element =  document.getElementById("messageTextArea"); 
 console.log("Now scrollTop = "+element.scrollTop);         // no change!
 console.log("Now scrollHeight = "+element.scrollHeight);

Firefox 控制台日志提供以下信息 -

scrollTop = 0 
scrollHeight = 86
The value is-->0
Now scrollTop = 0  
Now scrollHeight = 86

我真正想做的是，当文本不适合实际宽度和高度并且滚动条被激活时，以某种方式自动向下滚动到最大值。

这是解释问题的两个屏幕截图 -

这是我目前拥有的 -

这就是我想要的 -

请帮忙！

【问题讨论】：

你试过.scrollIntoView吗？
@GGG 我试过 element.scrollIntoView(false)，但还是不行。 :(
如果您在添加到聊天日志底部的元素上调用它，它应该可以工作。
当我在本地尝试时，该代码有效。你能用jsFiddle演示吗？

标签： javascript html textarea scrollbar

【解决方案1】：

好的，对不起，伙计们。问题是我得到了错误的文本区域。这太尴尬了！现在可以了。

  var element =  document.getElementById("chatTextArea"); // <-- this is where I was making a mistake in my code. So embarrassing!

【讨论】：

【解决方案2】：

在 firefox 中使用 scrollTop 和 textarea 时也会遇到问题，尤其是在使用 AJAX 设置 textarea 值时。

这对我有用：

<script>
function scroll_bottom(elm){
    var elm = document.getElementById(elm);
    var bottom = function() {
        elm.scrollTop = elm.scrollHeight;
    };
    setTimeout(bottom, 0);
}
</script>

然后使用它，例如：

<textarea id="log" style="width:100%;height:100%;resize:none;"></textarea>

<script>
$(document).ready(function(){
    scroll_bottom('log');
});
</script>

【讨论】：

【解决方案3】：

我相信当元素溢出可见时，在 FF 中设置 scrollTop 不起作用。如果溢出被隐藏，它会起作用

【讨论】：