代码之家 › 专栏 › 技术社区 › Sniggerfardimungus

自动滚动到不断增长的页面底部的javascript机制?

scroll browser javascript

Sniggerfardimungus · 技术社区 · 16 年前

希望这对于那些有javascript时间的人来说是一个简单的答案…

我有一个日志文件,它正被一个脚本监视,该脚本向任何连接的浏览器提供注销中的新行。一些人评论说,他们想看到的更多的是一种“tail-f”行为,最新的一行总是在浏览器页面的底部,直到浏览器向后滚动以查看某些内容。滚动回底部会返回到自动滚动行为。

我的谷歌在这一点上的努力——希望——只是一个根本不了解任何关于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事件,考虑到我提到的变量的数学计算结果很好,我认为我在这里走的是正确的道路。谢谢大家的意见!

6 回复 | 直到 6 年前

Yi Jiang G-Man 14 年前

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

Nathan 13 年前

要滚动整个文档,请使用:

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

如果您只有一个可滚动的DIV或其他,那么这个过程是不同的:

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

Jimmy 16 年前

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

Yi Jiang G-Man 14 年前

很好的jquery函数完成了这个

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

这对我很有用,它可以自动滚动到下拉菜单,使它成为焦点。

olfek 14 年前

这就解释了什么是设定时间间隔- 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>

Yi Jiang G-Man 14 年前

obj.scrollTop = obj.scrollHeight;