js 移动端上拉加载下一页通用方案
取页面三种高度
//取进度条到底部距离 var getScrollTop = function () { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop; } else if (document.body) { scrollTop = document.body.scrollTop; } return scrollTop; }; //取页面可视区域高度 var getClientHeight = function () { var clientHeight = 0; if (document.body.clientHeight && document.documentElement.clientHeight) { clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); } else { clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); } return clientHeight; }; //取文档整体高度 var getScrollHeight = function () { return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); };
当页面滚动到最底部时,才执行加载下一页的处理方法
//页面滚动事件 window.onscroll = function () { if (getScrollTop() + getClientHeight() == getScrollHeight()) { //页面已滚动到最底部 fun();//页面已滚动到最底部处理 } };
博客园作者:herry菌朋友,看到这里,关注作者的公众号吧,不漏掉更新哦
![]()
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步