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)

我认为这假设12px字体高度。我很想找到一种更强大/直接的方法来做到这一点。

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;

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

动态滚动文本区域

5 个答案: