jQuery实现判断滚动条到底部

判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。
scrollTop为滚动条在Y轴上的滚动距离。
clientHeight为内容可视区域的高度。
scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。
从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。
废话不多少说，赶紧上代码（兼容不同的浏览器）。
lazyload.js

//滚动条在Y轴上的滚动距离function getScrollTop（）{  var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;  if（document.body）{    bodyScrollTop = document.body.scrollTop;  }  if（document.documentElement）{    documentScrollTop = document.documentElement.scrollTop;  }  scrollTop = （bodyScrollTop - documentScrollTop > 0） ? bodyScrollTop : documentScrollTop;  return scrollTop;}//文档的总高度function getScrollHeight（）{  var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;  if（document.body）{    bodyScrollHeight = document.body.scrollHeight;  }  if（document.documentElement）{    documentScrollHeight = document.documentElement.scrollHeight;  }  scrollHeight = （bodyScrollHeight - documentScrollHeight > 0） ? bodyScrollHeight : documentScrollHeight;  return scrollHeight;}//浏览器视口的高度function getWindowHeight（）{  var windowHeight = 0;  if（document.compatMode == "CSS1Compat"）{    windowHeight = document.documentElement.clientHeight;  }else{    windowHeight = document.body.clientHeight;  }  return windowHeight;}window.onscroll = function（）{  if（getScrollTop（） + getWindowHeight（） == getScrollHeight（））{    alert（"you are in the bottom！"）;  }};

lazyload-jQuery.js

$（window）.scroll（function（）{  var scrollTop = $（this）.scrollTop（）;  var scrollHeight = $（document）.height（）;  var windowHeight = $（this）.height（）;  if（scrollTop + windowHeight == scrollHeight）{    alert（"you are in the bottom"）;  }}）;

lazyLoad.html

<！doctype html><html lang="en" style="height:900px;"> <head> <meta charset="UTF-8"> <meta name="Author" content="forever"> <link rel="stylesheet" href="css/lazyload.css" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <title>lazyLoad</title> <script type="text/javascript"> $（function（）{var $ul=$（"#lazyLoadWrap"）.find（"ul"）;$（window）.scroll（function（）{  var scrollTop = $（this）.scrollTop（）;  var scrollHeight = $（document）.height（）;  var windowHeight = $（this）.height（）;   if（scrollTop + windowHeight == scrollHeight）{for（var i=0;i<6;i++）{$ul.append（"<li>Hello</li>"）;}   }}）;}）; </script> </head> <body><div id="lazyLoadWrap"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li>12</li></ul></div> </body></html>

以上所述就是本文的全部内容了，希望大家能够喜欢。