テキストエリアを動的にスクロールする

Question

私はページにajaxでリロードされるtextarea html要素を持っています。テキストエリア全体は、その内容だけでなく毎回返され、内容は時間とともに増加します。テキストエリアに加えて、私には、JavaScriptの以下の部分を返す：Firefoxの3.0.7で

<script type="text/javascript" > 

var textArea = document.getElementById('outputTextResultsArea'); 
textArea.scrollTop = textArea.scrollHeight; 
</script> 

これは私が出力の最新情報を見ることができるようにテキストエリアの下部にあるスクロールバーを配置します。しかし、IE 7では、私は別の動作を参照してください。スクロールバーは内容どおりに下に移動しますが、内容がテキストエリアの高さを超えると、スクロールバーは下に移動しなくなります。 IEが新しい高さではなく要素の元のスクロール高さを記憶しているかのようです。

私はxhtml transitional doctypeを使用しています。また、jQueryを使用してこれを実現できれば、それにアクセスできるようになります。事前に

おかげ

ニール

Answer 1

迅速なハックとして、あなたはこれを行うことができます。

textArea.scrollTop = 99999; 

別のオプションは、タイマーでそれを試してみることです。

setTimeout(function() 
{ 
    var textArea = document.getElementById('outputTextResultsArea'); 
    textArea.scrollTop = textArea.scrollHeight; 
}, 10); 

Answer 2

タイムアウトを使用する代わりに、すべてのAJAXレスポンスでその関数を呼び出すことができます。

これは、不要なタイムアウトからブラウザを解放します。

Answer 3

jQueryを使用すると、$（ "textarea"）。scrollHeight（99999）はFirefoxとChromeではうまく動作しますが、IEではうまく動作しません。これは、textareaの最大行数に設定されているように見えますが、scrollHeightはピクセル数であると考えられます。 （すばらしい偉大な仕事のIEを表示する）。しかしこれは動作するように表示されます。

 $("textarea").scrollTop(99999) 
     $("textarea").scrollTop($("textarea").scrollTop()*12) 

私は、これは12ピクセルフォントの高さを想定していると思います。私はこれを行うためのより堅牢な/簡単な方法を見つけることが大好きです。

Answer 4

は、私は、Internet Explorerのためにこれを使用して終了：

textArea.createTextRange().scrollIntoView(false); 

を、これは他のブラウザのために：

textArea.scrollTop = textArea.scrollHeight;