如何设置textarea的scrollTop值？

Question

当我尝试为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

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

以下是解释此问题的两个屏幕截图 -

这就是我目前所拥有的 -

这就是我想要的 -

请帮忙！

Answer 1

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

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

Answer 2

在使用scrollTop的 firefox 中使用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>