浏览器滚动条快到底部时自动加载数据

最新推荐文章于 2025-09-04 18:55:33 发布

weixin_30949361

最新推荐文章于 2025-09-04 18:55:33 发布

阅读量172

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ICE_Inspire/p/5007076.html

本文介绍了一个使用jQuery实现的滚动加载效果示例，当用户滚动至页面接近底部时，自动加载新的内容区块。通过监听滚动事件并计算页面可视区域与底部的距离来触发加载逻辑。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <script src="jquery-1.8.2.js" type="text/javascript"></script>
 5 
 6     <script type="text/javascript">
 7         $(document).ready(function () {
 8             var range = 50;             //距下边界长度/单位px
 9             var elemt = 40;             //插入元素高度/单位px
10             var maxnum = 30;            //设置加载最多次数
11             var num = 1;
12             var totalheight = 0;
13             var main = $("#content");                     //主体元素
14             $(window).scroll(function () {
15                 var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)
16 
17                 //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());
18                 //console.log("页面的文档高度 ："+$(document).height());
19                 //console.log('浏览器的高度：'+$(window).height());
20 
21                 totalheight = parseFloat($(window).height()) + parseFloat(srollPos);//滚动条当前位置距顶部距离+浏览器的高度
22                 if (($(document).height() - totalheight) <= range && num != maxnum) {//页面底部与滚动条底部的距离<range
23                     main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac" + (num % 20) + (num % 20) + ";height:" + elemt + "' >hello world" + srollPos + "---" + num + "</div>");
24                     main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac" + (num % 20) + (num % 20) + ";height:" + elemt + "' >hello world" + srollPos + "---" + num + "</div>");
25                     num++;
26                 }
27             });
28         });
29     </script>
30 </head>
31 <body>
32     <div id="content" style="height:960px">
33         <div id="follow">this is a scroll test;<br />    页面下拉自动加载内容</div>
34         <div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800'>hello world test DIV</div>
35 
36     </div>
37 </body>
38 </html>