jQuery 滚动条滚动到底部（下拉到底部）加载数据(触发事件、处理逻辑)、分页加载数据

1、针对浏览器整个窗口滚动主要代码：

 1 　　<script type="text/javascript">
 2         var pageNum = 1;
 3         function GetProductListPageFun() {  //请求获取数据
 4 
 5         }
 6         $(window).scroll(function () {  //分页
 7             if ($(window).scrollTop() + $(window).height() == $(document).height()) { //滚动到底部时
 8                 pageNum += 1;
 9                 GetProductListPageFun();
10             }
11         });
12     </script>

2、一个页面div 内的滚动条下拉到底部，触发事件（加载更多内容）完整代码（注意：div 必须出现滚动条，此方法才有效）：

 1 <!DOCTYPE=html>
 2 <html>
 3 <head>
 4     <script src="../Js/jquery-1.9.1.min.js" type="text/javascript"></script>
 5 </head>
 6 <body>
 7     <div>
 8         测试 div 滚动条下拉掉浏览器底部加载</div>
 9     <div class="scrollDiv" style="height: 500px; overflow: auto;">
10         <div class="childDiv" style='border: 1px solid Black; margin-top: 20px; color: Green; height: 600px'>
11     </div>
12     </div>
13 </body>
14 <script type="text/javascript">
15     //关键代码  注意：div 必须出现滚动条 ， 此方法才有效
16     $(document).ready(function () {
17         $(".scrollDiv").unbind("scroll").on("scroll", function (e) {  //注意：含有css类名为：scrollDiv 的div 要出现 滚动条 此函数(scroll)才会触发
18             var sum = this.scrollHeight;  //滚动条距顶部距离(页面超出窗口的高度)
19             var $obj = $(this);
20             if (sum <= $obj.scrollTop() + $obj.height()) {  //判断滚动条是否 到达了 底部 ， $obj.scrollTop()：滚动条距顶部距离(页面超出窗口的高度) ，$obj.height()：当前（div）滚动窗口的高度
21                 //div 的滚动条 滚动到浏览器底部 时 需要处理的逻辑
22                 //$(".scrollDiv").append($(".childDiv").clone());
23                 console.log("滚动条到达浏览器底部");
24                 alert("滚动条到达浏览器底部");
25             }
26         });
27     });
28 </script>
29 </html>

View Code