自动滚动到不断增长的页面底部的 Javascript 机制? [英] Javascript mechanism to autoscroll to the bottom of a growing page?
问题描述
希望这对于那些落后于 Javascript 时间的人来说是一个简单的答案......
Hopefully, this will be an easy answer for someone with Javascript time behind them...
我有一个脚本正在监视一个日志文件，该脚本将注销中的新行提供给任何连接的浏览器.一些人评论说，他们想要看到的更多是tail -f"行为 - 最新的行将始终位于浏览器页面的底部，直到查看者向上滚动以查看某些内容.滚动回底部应该会返回到自动滚动行为.
I have a log file that is being watched by a script that feeds new lines in the log out to any connected browsers. A couple people have commented that what they want to see is more of a 'tail -f' behavior - the latest lines will always be at the bottom of the browser page until the viewer scrolls back up to see something. Scrolling back to the bottom should return you to the auto-scrolling behavior.
我的谷歌三振出局 - 希望 - 只是对 javascript 一无所知，因此，不知道要搜索哪些关键字.我不需要一个完整的解决方案——只需要一个足够接近"的东西，让我跳进去弄脏我的手.
My google strikeout on this one is - hopefully - just a matter of not knowing anything at all about javascript and therefore, not knowing what keywords to search for. I don't need a complete solution - just a 'close enough' that lets me jump in and get my hands dirty.
我一直在尝试使用 scrollTop/scrollHeight 的想法，但显然我遗漏了一些东西.我几乎没有使用过 Javascript，所以我可能再次提出了非常低级的问题:
I've been attempting the scrollTop/scrollHeight idea, but am clearly missing something. I've done next to nothing with Javascript, so again I'm probably asking very low-level questions:
<html><body>
<script type="text/javascript">
for (i=0; i<100; i++)
{
document.write("" + i + "<br />");
document.scrollTop = document.scrollHeight;
}
</script>
</body></html>
这是众多排列之一.显然，我无法在 javascript 中逐行输出日志，但我只是想看看正确的行为.我在这里需要的缺失链接是什么?
This was one of many permutations. Obviously, I can't output the log line-by-line in javascript, but I'm just trying to see the correct behavior. What's the missing link I need here?
再次这已经变成了我最初预期的一个更有趣的问题.使用 window.scroll 的代码建议确实可以解决问题.我开始尝试将滚动限制为仅在浏览器位于文档正文底部时发生.这在理论上很容易做到，但在实践中却遇到了障碍:
EDIT AGAIN: This has turned into a far more interesting problem that I first expected. The code suggestion using window.scroll does do the trick. I started playing with restricting the scroll to only take place when the browser was at the bottom of the document body. This is easy enough to do in theory, but in practice it hits a snag:
每次从服务器获取新文本时，正文的大小都会增加，并且您当前的滚动位置不再位于文档底部.您无法再区分(使用 scrollHeight、clientHeight 和 scrollTop)用户是向上滚动还是文本刚刚超出了他们的视野.
Every time you get new text from the server, the size of the body increases and your current scroll position is no longer at the bottom of the document. You can no longer tell the difference (using scrollHeight, clientHeight and scrollTop) whether the user has scrolled up or if the text has just shot beyond their view.
我认为，如果这行得通，我将不得不承诺让自己拥有一个 JS 事件，该事件在用户滚动时触发，如果它们位于窗口底部上方，则关闭滚动，但会转动它如果他们向下滚动到有效地位于视图底部的点，则返回.我正在查看 onScroll 事件，鉴于我提到的变量的数学计算结果很好，我认为我在这里走上了正确的道路.谢谢大家的意见！
I think that if this is going to work, I'm going to have to commit myself to having a JS event that fires when the user scrolls and turns off scrolling if they are above the bottom of the window, but turns it back on if they have scrolled down to the point where they are effectively at the bottom of the view. I'm looking at the onScroll event and, given that the math on the variables I mentioned works out pretty well, I think I am on the right path here. Thanks for your input, everyone!
推荐答案
x = 0; //horizontal coord
y = document.height; //vertical coord
window.scroll(x,y);
这篇关于自动滚动到不断增长的页面底部的 Javascript 机制?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
