关于上拉加载的刷新

来源：互联网发布：控制软件编辑：程序博客网时间：2024/06/10 13:20
原理：做了一个判断
getScrollHeight() - (getScrollTop() + getClientHeight()) <= 10，
第一个函数获取滚动条的位置，第二个函数获取当前屏幕可见的高度，第三个函数获取当前文档的总高度，
当前两个参数跟第三个参数快相等的时候，就表示文档已经拉到底部了，触发事件向后台请求数据。这样一个分页功能就写出来了。


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               //写接口           }35         }36         //-----------------结束--------------------
阅读全文
0 0