jquery-觸底加載無限滾動

在我們將較長的執行結果展示到前端頁面時可能會較占篇幅，可以設置一個無限滾動效果將其固定顯示在一個固定大小的框框，並且執行結果實現實時更新

 

HTML代碼：

<div id="post_deploy_result" name="deploy_result" style="height: 150px;overflow-y: auto;" class="zntest"></div>

js代碼：

$("#"+result['progress']+"_result").append("<p>"+result["msg"]+"</p>");        # 將實時更新的內容渲染到頁面
// $(".zntest").animate({ scrollTop: $('.zntest').prop("scrollHeight")}, 1000);    # 頁面自動滾動方法1
//     var d = $('.zntest');d.scrollTop(d.prop("scrollHeight"));    # 頁面自動滾動方法2
$('.zntest').scrollTop($('.zntest')[0].scrollHeight);   # 頁面自動滾動方法3

 

 

 

最終效果就像cmd黑框口執行命令，實時更新狀態並觸底自動彈起