您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
jQuery实现判断滚动条到底部
作者：佚名 责任编辑：admin 更新时间：2022-06-22
这篇文章主要介绍了jQuery实现判断滚动条到底部的相关资料,需要的朋友可以参考下
判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。
scrollTop为滚动条在Y轴上的滚动距离。
clientHeight为内容可视区域的高度。
scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。
从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。
废话不多少说，赶紧上代码(兼容不同的浏览器)。
lazyload.js
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 //滚动条在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
? 1 2 3 4 5 6 7 8 $(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
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 <!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>以上所述就是本文的全部内容了，希望大家能够喜欢。
- 上一个程序编程： jQuery实现新消息在网页标题闪烁提示
- 下一个程序编程： Windows系统下Node.js的简单入门教程
