首页 > Web开发 > 详细

jquery-触底加载无限滚动

时间:2020-01-17 23:21:19      阅读:78      评论:0      收藏:0      [点我收藏+]

在我们将较长的执行结果展示到前端页面时可能会较占篇幅,可以设置一个无限滚动效果将其固定显示在一个固定大小的框框,并且执行结果实现实时更新

 

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黑框口执行命令,实时更新状态并触底自动弹起

jquery-触底加载无限滚动

原文:https://www.cnblogs.com/lutt/p/12207740.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!