www.szweb.cn
如何利用
JS
实现页面数据无限加载
实现数据无限加载的过程大致如下:
1.
滚动条滚动到页面底部
.
2.
触发
ajax
加载,把请求返回的数据加载到列表后面
.
如何判断滚动条是否滚动到页面底部?我们可以设置一个规则:
当滚动条的滚动高度和
整个文档高度相差不到
20
像素,则认为滚动条滚动到页面底部了:
文档高度
-
视口高度
-
滚动条滚动高度
<20
要通过代码实现这样的判断,
我们必须要了解上面的这些高度通过哪些代码获取?可以
参考我之前写的一篇“
HTML
元素坐标定位,这些知识点得掌握”
.
上面的判断,封装了一个方法:
//
检测滚动条是否滚动到页面底部
functionisScrollToPageBottom(){
//
文档高度
vardocumentHeight=document.documentElement.offsetHeight
;
varviewPortHeight=getViewportSize().h
;
varscrollHeight=window.pageYOffset||
document.documentElement.scrollTop||
document.body.scrollTop||0
;
returndocumentHeight-viewPortHeight-scrollHeight<20
;
}
判断有了,
我们就可以开启一个定时器,
900
毫秒监测一次,
如果
isScrollToPageBottom()
返回
true
则调用
ajax
请求数据,如果返回
false
则通过
900
毫秒之后再监测
.
下面是核心代码实现: