自动滚动到不断增长的页面底部的 Javascript 机制？答案

【问题标题】：Javascript mechanism to autoscroll to the bottom of a growing page?自动滚动到不断增长的页面底部的 Javascript 机制？
【发布时间】：2008-12-22 22:32:25
【问题描述】：

希望这对于有 Javascript 时间的人来说是一个简单的答案...

我有一个脚本正在监视一个日志文件，该脚本将日志中的新行提供给任何连接的浏览器。一些人评论说，他们希望看到的更多的是“tail -f”行为——最新的行将始终位于浏览器页面的底部，直到查看器向上滚动查看某些内容。滚动回底部应该会返回到自动滚动行为。

我的 google 删除了 - 希望 - 只是对 javascript 一无所知，因此不知道要搜索什么关键字。我不需要一个完整的解决方案 - 只是一个“足够接近”，让我可以跳进去弄脏我的手。

编辑：

我一直在尝试 scrollTop/scrollHeight 的想法，但显然缺少一些东西。我几乎没有使用 Javascript 做任何事情，所以我可能再次提出了非常低级的问题：

<html><body>
<script type="text/javascript">
for (i=0; i<100; i++)
{
    document.write("" + i + "<br />");
    document.scrollTop = document.scrollHeight;
}
</script>
</body></html>

这是许多排列之一。显然，我无法在 javascript 中逐行输出日志，但我只是想查看正确的行为。我需要在这里缺少什么链接？

再次编辑：这已经变成了一个我最初预料到的更有趣的问题。使用 window.scroll 的代码建议确实可以解决问题。我开始尝试将滚动限制为仅在浏览器位于文档正文底部时发生。这在理论上很容易做到，但在实践中却遇到了困难：

每次从服务器获取新文本时，正文的大小都会增加，并且您当前的滚动位置不再位于文档的底部。您无法再区分（使用 scrollHeight、clientHeight 和 scrollTop）是用户向上滚动还是文本刚刚超出他们的视野。

我认为如果这行得通，我将不得不承诺让自己在用户滚动时触发一个 JS 事件，如果他们在窗口底部上方则关闭滚动，但将其打开如果它们向下滚动到它们实际上位于视图底部的位置，则重新打开。我正在查看 onScroll 事件，并且鉴于我提到的变量的数学计算结果非常好，我认为我在这里走的是正确的道路。谢谢大家的意见！

【问题讨论】：

标签： javascript browser scroll

【解决方案1】：

x = 0;  //horizontal coord
y = document.height; //vertical coord
window.scroll(x,y);

【讨论】：

document.height 不存在。应该是document.body.scrollHeight。
OR, y = $(document).height(); //垂直坐标

【解决方案2】：

要滚动整个文档，请使用：

window.scrollTo(0, document.body.scrollHeight);

如果你只有一个可滚动的 div 或其他东西，那么过程就不同了：

var obj = $('id');
obj.scrollTop = obj.scrollHeight;

【讨论】：

我可以支持，@CMR。
唯一的问题是定义了 obj.scrollHeight 的假设。仅当您引用实际的 DOM 元素而不是 jQuery 结果时才定义它。因此，除非您将值设为 obj.get(0).scrollHeight，否则此解决方案将失败。假设 $('id') 中只有一个匹配元素。

【解决方案3】：

for (i = 0; i < 100; i++) {
    document.write("" + i + "<br />");
    window.scroll(0,document.body.offsetHeight);
}

【讨论】：

【解决方案4】：

很好的 jQuery 函数完成了这项工作

$('html,body').animate({ scrollTop: element.offset().top }, 'slow');

这对我有用，用它来自动滚动到下拉菜单以使其成为焦点

【讨论】：

非常棒。当window.scrollTo(0, document.body.scrollHeight); 不行时，这对我有用。我在.click(function() { }); 块中使用了它，我使用$(this) 而不是element。不错。

【解决方案5】：

这解释了设置的时间间隔是什么 - http://www.w3schools.com/jsref/met_win_setinterval.asp

这解释了什么是设置超时 - http://www.w3schools.com/jsref/met_win_settimeout.asp

这将使用 javascript 滚动页面并在 6 秒后停止

    <script type = "text/javascript" >

    var x;
    function autoscroll(){
    self.scrollBy(0,x)
    }

    function playautoscroll(){
    x = 1;
    setInterval('autoscroll()',0.01);
    stop();}

    function onetozero(){
    x=0;
    }

    function stop(){
    setTimeout ("onetozero()",6000);
    }
    window.onload=playautoscroll

    </script>

【讨论】：

【解决方案6】：

obj.scrollTop = obj.scrollHeight;

【讨论】：

这仅在您尝试滚动 div 或其他元素时有效，而不是整个窗口/文档