动态滚动文本区域

Question

我的页面上有一个textarea html元素，该元素通过ajax重新加载。每次返回整个文本区域时，不仅返回其内容，而且内容随时间增长。连同textarea一起，我返回了以下javascript：

<script type="text/javascript" >

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

在firefox 3.0.7中，这会将滚动条放在textArea的底部，使我可以看到最新的输出。但是在IE 7中，我看到了不同的行为。滚动条将按预期的内容向下移动，但是一旦内容较大，则文本区域的高度将不再向下滚动。似乎IE记住的是元素的原始滚动高度，而不是新高度。

我正在使用xhtml过渡文档类型，如果有帮助。另外，如果可以用jQuery做到这一点，因为我可以访问它就可以了。

预先感谢

Neil

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)

我认为这是假定字体高度为12px。我很想找到一种更强大/简单的方法来进行此操作。

Answer 3

而不是使用超时，而是在每个AJAX响应上调用该函数-只要您可以对其进行调整。

这将使您的浏览器摆脱不必要的超时。

Answer 4

我最终将其用于Internet Explorer：

textArea.createTextRange().scrollIntoView(false);

以及其他浏览器的名称：

textArea.scrollTop = textArea.scrollHeight;

Answer 5

为了在示例中使用类似textarea的名称，请为您的textarea命名为“ id = LiveTextArea”然后添加您的JavaScript的buttom这个（LiveTextArea是ID名称）：

LiveTextArea.scrollTop = LiveTextArea.scrollHeight;

所以看起来像：var textArea = document.getElementById（'outputTextResultsArea'）;textArea.scrollTop = textArea.scrollHeight;

现在，文本区域将在任何新条目上动态滚动插入符号/向下。