在手机上浏览网页时，我们经常会用到一个功能。当我们浏览JD.COM或淘宝时，页面会滑动到底部，我们会看到数据会自动加载到列表中。之前不知道怎么实现这些功能，就在PC浏览器上模拟实现了。先看浏览效果：

当滚动条滚动到页面底部时，它会提示“正在加载.”。

当页面加载完所有数据后，滚动到页面底部会提示“数据已加载到底”:

实现无限数据加载的过程大致如下：

1.滚动条滚动到页面底部。

2.触发ajax加载，并将请求返回的数据加载到列表的后面。

如何确定滚动条是否滚动到页面底部？我们可以设置一个规则：当滚动条的滚动高度与整个文档高度之差小于20像素时，就认为滚动条已经滚到页面底部了：

文档高度-视口高度-滚动条滚动高度20

为了通过代码实现这种判断，我们必须知道哪些代码获得了这些高度。可以参考我之前写的一篇文章，“HTML元素坐标定位，这些知识点一定要掌握”。

综上所述，我封装了一个方法：

//检查滚动条是否滚动到页面底部。函数isscrolltopagebottom(){//document height var document height=document . document element . offset theight；var viewport height=getviewport size()。h；var scroll height=window . pageyoffset | | document . document element . scroll top | | document . body . scroll top | | 0；返回document height-viewport height-scroll height 20；}如果判断出来，我们可以启动一个定时器，900毫秒监控一次。如果isScrollToPageBottom()返回true，将调用ajax请求数据，如果返回false，将在900毫秒后对其进行监控。

以下是核心代码实现：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题无限分页/title link rel='样式表href=' assets/CSS/index。CSS/headdydiv class=' l-page ' ul id=' list ' class=' list '/ul/div脚本src=' http://cdn。bootscs。com/jquery/3。1 .0/jquery。量滴js '/script script src=' http : js/jquery。模拟杰克斯。js '/script脚本类型=' text/JavaScript ' src='作为一个对象的w和h属性返回视口的尺寸函数getViewportSize(w){ //使用指定的窗口，如果不带参数则使用当前窗口w=w ||窗口；//除了IE8及更早的版本以外，其他浏览器都能用if(w.innerWidth！=null)返回{w: w.innerWidth，h : w . inner height }；//对标准模式下的IE(或任意浏览器)var d=w.documentif(文档。compat模式==' css1 compat ')返回{ w :d。文档元素。客户端宽度，h :d。文档元素。客户端高度}；//对怪异模式下的浏览器返回{w: d.body.clientWidth，h :d。尸体。客户端高度}；} //检测滚动条是否滚动到页面底部函数isScrollToPageBottom(){ //文档高度var文档高度=文档。文档元素。偏右；var viewport height=get viewport size().h；var滚动高度=窗口。pageyoffset | |文档。文档元素。向上滚动| |文档。尸体。滚动顶部| | 0；返回文档高度-视口高度-滚动高度20；} //商品模板函数getGoodsTemplate(商品){ return ' Li ' ' div class=' pic-wrap left float ' ' ' img src='商品。pic ' ' ' '/div ' ' class=' info-wrap left float ' ' ' div class=' info-name ' span/div ' ' div class=' info-address ' span '货物。地址/span/div ' ' div class=' info-bottom ' ' ' div class=' info-price left float ' span商品。价格/span/div“div class=”信息-左星人推荐/span/div ' ' div class=' info-more left float ' span更多信息/span/div ' '/div ' '/div ' '/Li '；} //初始化的时候默给目录加载100条数据$.Ajax(' http://localhost :8800/LoadDATa？会话Id='(新日期))。完成(函数(结果){ if(结果。状态){ var html=result.data.forEach(函数（商品){ html=getGoodsTemplate(商品);});$('#list ').追加(html)；} });//加载数据函数loadDataDynamic(){ //先显示正在加载中if($('#loadingLi ').长度===0) $('#list ').追加(' li id='loadingLi' class='loading ')正在加载./Li’)；else{ $('#loadingLi ').文本('正在加载.').removeClass(“”空格');} var loadingLi=document。getelementbyid(' LoadIngli ')；装载李。scrollintoview()；//加载数据，数据加载完成后需要移除加载提示var hasData=false，msg=$。Ajax(' http://localhost :8800/LoadDATa？会话Id='(新日期))。完成(函数(结果){ if(结果。状态){ if(结果。数据。长度0){ HasDATa=true；var html=result.data.forEach(函数（商品){ html=getGoodsTemplate(商品);});$('#list ').追加(html)；}else{ msg='数据已加载到底了} } $(“# list”).追加(loading Li)；}).fail(function(){ msg='数据加载失败!'；}).always(function(){！hasData setTimeout(函数(){ $(document.body)).向上滚动(文档。尸体。滚动顶部-40)；}, 500);msg $('#loadingLi ').文本(味精)；//重新监听滚动setTimeout(watchScroll，900)；});} //如果滚动条滚动到页面底部，需要加载新的数据，并且显示加载提示函数watchScroll(){ if(！isScrollToPageBottom()){ setTimeout(参数。calleeper，900)；返回；} LoadDatadynamic()；} //开始检测滚动条手表卷轴()；/脚本/正文/htmldemo中创建交互式、快速动态网页应用的网页开发技术请求我是通过jquery-mockjax模拟的数据。代码如下：

/** * 模拟接口*/var i=0，len=200，地址=['四川', '北京', '上海', '广州', '深圳', '甘肃', '云南', '浙江', '青海', '贵州'];函数getData(){ var size=Math.min(i 50，len)，arr=[]；for(；一、尺寸；i ){ arr.push({ name: '苹果(i % 10 1)，pic: "资产/图像/iphone"(I % 10 1).‘jpg’，价格： ParSeint(数学。random()* 10000)，star : ParSeint(数学)。random()* 1000)，地址：地址[I % 10]})返回arr}$.mock jax({ URL : ' http://localhost :8800/loadData * '，responseTime: 1000，response:函数（设置){这个。responsetext={ status 3360 true，data : getData()} } })；整个完整的演示我已上传到开源代码库上：https://github。com/hea vis/PageLoader

在线演示：https://heavis。github。io/PageLoader/index。超文本标记语言

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。