首页 > 代码库 > html-滚动到底部自动加载
html-滚动到底部自动加载
<!DOCTYPE html> <html> <head> <title>无限翻页测试</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <style type="text/css"> #spinner{ position: fixed; top: 20px; left: 40%; display: block; color: red; font-weight: 900; background-color: rgba(80, 80, 90, 0.22); padding-top: 20px; padding-bottom: 20px; padding-left: 100px; padding-right: 100px; border-radius: 15px; } </style> </head> <body> <div id="sample"> </div> <div id="spinner"> 正在加载 </div> <script type="text/javascript"> var index = 0; function lowEnough(){ var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight); var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0; var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; // console.log(document.body.scrollHeight); // console.log(document.body.offsetHeight); // console.log(pageHeight); // console.log(viewportHeight); // console.log(scrollHeight); return pageHeight - viewportHeight - scrollHeight < 20; } function doSomething(){ var htmlStr = ""; for(var i=0;i<10;i++){ htmlStr += "这是第"+index+"次加载<br>"; } $(‘#sample‘).append(htmlStr); index++; pollScroll();//继续循环 $(‘#spinner‘).hide(); } function checkScroll(){ if(!lowEnough()) return pollScroll(); $(‘#spinner‘).show(); setTimeout(doSomething,900); } function pollScroll(){ setTimeout(checkScroll,1000); } checkScroll(); </script> </body> </html>
html-滚动到底部自动加载
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。