动态滚动文本区域答案

【问题标题】：Dynamically Scrolling a Textarea动态滚动文本区域
【发布时间】：2010-10-13 03:26:48
【问题描述】：

我的页面上有一个通过 ajax 重新加载的 textarea html 元素。每次都返回整个文本区域，而不仅仅是它的内容，而且内容会随着时间的推移而增长。除了 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 来实现，那很好，因为我可以访问它。

提前致谢

尼尔

【问题讨论】：

标签： javascript ajax xhtml textarea

【解决方案1】：

作为一个快速破解，你可以这样做：

textArea.scrollTop = 99999;

另一种选择是在计时器中尝试：

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

【讨论】：

感谢这确实有效！如果有任何其他建议，我会保留这个问题。

【解决方案2】：

使用 jQuery，$("textarea").scrollHeight(99999) 在 Firefox 和 Chrome 上效果很好，但在 IE 上效果不佳。它似乎将其设置为文本区域中的最大行数，而 scrollHeight 应该是像素数。（真棒展示了伟大的工作IE）。不过这似乎可行：

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

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

【讨论】：

【解决方案3】：

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

这将使您的浏览器免于不必要的超时。

【讨论】：

我认为他已经这样做了，否则它不会在 Firefox 中工作

【解决方案4】：

我最终将它用于 Internet Explorer：

textArea.createTextRange().scrollIntoView(false);

这适用于其他浏览器：

textArea.scrollTop = textArea.scrollHeight;

【讨论】：

【解决方案5】：

对于在您的示例中使用 like textarea，请为您的 textarea 命名为“id=LiveTextArea”

然后添加你的 javascript 的按钮（LiveTextArea 是 id 名称）：

LiveTextArea.scrollTop = LiveTextArea.scrollHeight;

看起来像：

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

textArea.scrollTop = textArea.scrollHeight;

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

【讨论】：