DIV固定高度滚动条滚动最底部，加载新的li
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <style> ul{ height:500px; overflow: auto; } ul li{ height:60px; line-height:60px; } ul li:first-child{ background: #f00; } </style> </head> <body> <ul id="ul"> <li>的第三季度</li> <li>的第三季度</li> <li>的第三季度</li> <li>的第三季度</li> <li>的第三季度</li> <li>的第三季度</li> <li>的第三季度</li> <li>的第三季度</li> <li>的第三季度结尾</li> </ul> <script> /*屏幕滚动后加载分页*/ $("#ul").scroll(function(){ var nScrollTop=$(this)[0].scrollTop;//滚动条距顶部的高度 var nDivHight=$(this).height();//可见区域的高度 var nScrollHight= $(this)[0].scrollHeight;//为整个UL的高度（包括屏幕外的高度） if(nScrollTop + nDivHight >= nScrollHight){ console.log("滚动条到底部了"); for(var i=0;i<3;i++){ var li=$("<li>我们"+i+"</li>"); $("#ul").append(li); } } }); </script> </body> </html>
window固定高度滚动条滚动最底部，加载新的li
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <style> ul li{ height:60px; line-height:60px; } ul li:first-child{ background: #f00; } </style> </head> <body> <ul id="ul"> <li>的第三季度</li> <li>的第三季度</li> <li>的第三季度</li> <li>的第三季度</li> <li>的第三季度</li> <li>的第三季度</li> <li>的第三季度</li> <li>的第三季度</li> <li>的第三季度</li> <li>的第三季度</li> <li>的第三季度</li> <li>的第三季度结尾</li> <li>的第三季度</li> <li>的第三季度</li> <li>的第三季度</li> <li>的第三季度结尾</li> </ul> <script> /*屏幕滚动后加载分页*/ $(window).scroll(function(){ var scrollTop = $(this).scrollTop();//滚动条距离顶部的高度 var scrollHeight = $(document).height();//获取整个页面的高度 var windowHeight = $(this).height();//获取当前可见区域的高度 if(scrollTop + windowHeight == scrollHeight){ console.log("滚动条到底部了"); for(var i=0;i<3;i++){ var li=$("<li>我们"+i+"</li>"); $("#ul").append(li); } } }); </script> </body> </html>