當添加新內容時滾動到頁面的底部（不涉及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）

回答

相關問題