jQuery实现判断滚动条到底部

时间：2021-05-26

判断滚动条到底部，需要用到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>

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章