テキストエリアの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は何とか自動的に最大に下にスクロールするようにすることですテキストが実際の幅と高さに収まらず、スクロールバーがアクティブになります。

これは私が現在持っているものです - - ここで

のは、問題を説明する2つのスクリーンショットです

そして、これは私が持っているしたいものです -

助けてください！

Answer 1

これは私にとってはうまくいくようですhttp://jsfiddle.net/7uXKX/6/

Answer 2

よろしくお願いします。問題は、私が間違ったテキストエリアを取得していたことでした。これはとても恥ずかしいです！今それは動作します。

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

Answer 3

はまた、テキストエリアの値がAJAXで設定されている場合は特に、textareaでFirefoxのでscrollTopを使用して問題がありました。

これが私の仕事：

<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>