js上拉加载刷新

js_原生js实现上拉加载更多的功能。

1 //--------------上拉加载更多---------------
2 //获取滚动条当前的位置
3 function getScrollTop() {
4 var scrollTop = 0;
5 if(document.documentElement && document.documentElement.scrollTop) {
6 scrollTop = document.documentElement.scrollTop;
7 } else if(document.body) {
8 scrollTop = document.body.scrollTop;
9 }
10 return scrollTop;
11 }
12
13 //获取当前可视范围的高度
14 function getClientHeight() {
15 var clientHeight = 0;
16 if(document.body.clientHeight && document.documentElement.clientHeight) {
17 clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
18 } else {
19 clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
20 }
21 return clientHeight;
22 }
23
24 //获取文档完整的高度
25 function getScrollHeight() {
26 return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
27 }
28
29 //滚动事件触发
30 window.onscroll = function() {
31 if(getScrollTop() + getClientHeight() == getScrollHeight()) {
32 34 }
35 }
36 //-----------------结束--------------------
复制代码

原理很简单，代码31行做了一个判断getScrollTop() + getClientHeight() == getScrollHeight()，第一个函数获取滚动条的位置，第二个函数获取当前屏幕可见的高度，第三个函数获取当前文档的总高度，

当前两个参数等等第三个参数的时候，就表示文档已经拉到底部了，触发事件向后台请求数据。这样一个分页功能就写出来了。