当添加新内容时滚动到页面的底部（不涉及AJAX）

我有一个PHP脚本，我不能修改，它在linux机器上执行一些命令，并将stdout和stderr传递到网页。当请求PHP页面时，它会一直加载，直到所有命令完成。输出显示在页面上，因为它是在Linux机器上生成的。当添加新内容时滚动到页面的底部（不涉及AJAX）

当前，添加新内容时，它将（最终）添加到页面视图下方，以便我必须手动向下滚动才能看到它。我正在寻找一种方法将页面滚动到底部，或者在添加新内容时滚动。

任何想法？

注：我试过$('html, body').animate({scrollTop:$(document).height()}, 'slow');从18252285，但它不起作用。我得到在Chrome控制台执行以下操作：

Uncaught TypeError: Cannot read property 'scrollHeight' of null

来源

2016-08-04 synaptik

（'html，body'）看起来很虚伪。你尝试过一种，还是其他的，但不是两种？ –

可以setInterval的滚动，这将继续滚动到下

var simulateServerOutput = window.setInterval(function() { 
    var $newElem = $('<div/>', { 
    'html': Math.random().toString(36).substring(7) 
    }).appendTo('.content'); 
}, 1000); 


var autoScroll = window.setInterval(function() { 
    var $target = $('html,body'); 
    $target.animate({scrollTop: $target.height()}, 1000); 
}, 500);

示例页面： https://jsfiddle.net/byLc06ez/1/

这看起来不错，但我怎么会终止滚动循环？也就是，页面完成加载后，，我不希望它自动滚动到底部。是否有一些js我可以追加到最后，在所有linux命令完成后之后，那会停止这个？ - synaptik 45分钟前

清除的时间间隔（停止），你只需执行clearInterval(autoScroll); 但你怎么回事，你知道当页面加载完成？你可以使用$(document).ready(function(){ ..... });，但这实际上取决于浏览器。

因此可能需要一个更复杂的方法，例如拍摄已加载内容$（'。content'）。html（）的快照，然后每秒钟将其与最新快照进行比较并查看是否不同。如果不是这意味着它完成加载。那么你可以清除计时器。

来源

2016-08-04 21:15:37

这看起来不错，但我将如何终止这个滚动循环？也就是说，页面完成加载后，我不希望它自动滚动到底部。是否有一些JS可以追加到最后，在所有的linux命令完成之后，这会阻止它？ – synaptik

查看更新。 –

试试这个 -

setInterval(function() { 
    window.scrollTo(0,document.body.scrollHeight); 
}, 10);

每隔10ms后，页面会向下滚动至底部。谢谢，让我知道你是否有任何问题。

来源

2016-08-04 21:15:08 Arnab003

当添加新内容时滚动到页面的底部（不涉及AJAX）

回答

相关问题