動態滾動文本區域

Question

我的頁面上有一個 textarea html 元素，它通過 ajax 重新加載。 每次都返回整個 textarea，而不僅僅是其內容，而且內容會隨着時間的推移而增長。 隨着 textarea 我返回以下一段 javascript：

<script type="text/javascript" >

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

在 firefox 3.0.7 中，這會將滾動條放在 textArea 的底部，讓我可以看到最新的輸出。 但是在 IE 7 中，我看到了不同的行為。 滾動條按預期隨着內容向下移動，但是一旦內容大於 textarea 高度，滾動條就不再向下移動。 似乎 IE 正在記住元素的原始滾動高度，而不是新高度。

如果有幫助，我正在使用 xhtml 過渡文檔類型。 此外，如果這可以通過 jQuery 實現，那也很好，因為我可以訪問它。

提前致謝

尼爾

Answer 1

作為一個快速的黑客，你可以這樣做：

textArea.scrollTop = 99999;

另一種選擇是在計時器中嘗試：

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

Answer 2

使用 jQuery，$("textarea").scrollHeight(99999) 在 Firefox 和 Chrome 上效果很好，但在 IE 上效果不佳。 它似乎將其設置為 textarea 中的最大行數，而 scrollHeight 應該是像素數。 （令人敬畏的展示出色的工作 IE）。 不過，這似乎有效：

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

我認為這假定字體高度為 12 像素。 我很想找到一種更強大/更直接的方法來做到這一點。

Answer 3

不要使用超時，而是在每個 AJAX 響應上調用該函數 - 前提是您可以對其進行調整。

這將使您的瀏覽器免於不必要的超時。

Answer 4

我最終將它用於 Internet Explorer：

textArea.createTextRange().scrollIntoView(false);

這對於其他瀏覽器：

textArea.scrollTop = textArea.scrollHeight;

Answer 5

為了在你的例子中使用類似的 textarea 給你的 textarea 一個名字，比如“ id=LiveTextArea ”

然后在你的 javascript 的底部添加這個（LiveTextArea 是 id 名稱）：

LiveTextArea.scrollTop = LiveTextArea.scrollHeight;

所以看起來像：

var textArea = document.getElementById('outputTextResultsArea');

textArea.scrollTop = textArea.scrollHeight;

現在 textarea 將在任何新條目上動態滾動插入符號/向下。