jQuery实现判断滚动条滚动到document底部的方法分析
本文实例讲述了jQuery实现判断滚动条滚动到document底部的方法。分享给大家供大家参考，具体如下：
滚动条没有实际的高度。只是为了呈现效果才在外型上面有长度。
在js当中也没有提供滚动条的高度API。
参考了网上有关资料：判断滚动条到底部的基本逻辑是滚动条滚动的高度加上视口的高度，正好是document的高度，公式表示为
滚动条滚动的高度+浏览器视口的高度>=document的高度。
参考网上资料，具体代码如下：
//滚动条在Y轴上的滚动距离
functiongetScrollTop(){
varscrollTop=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;
returnscrollTop;
}
//文档的总高度
functiongetScrollHeight(){
varscrollHeight=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;
returnscrollHeight;
}
//浏览器视口的高度
functiongetWindowHeight(){
varwindowHeight=0;
windowHeight=document.documentElement.clientHeight;
returnwindowHeight;
}
window.onscroll=function(){
if(getScrollTop()+getWindowHeight()==getScrollHeight()){
alert("youareinthebottom!");
}
};
jquery实现代码：
$(window).scroll(function(){
varscrollTop=$(this).scrollTop();
varscrollHeight=$(document).height();
varwindowHeight=$(this).height();
if(scrollTop+windowHeight==scrollHeight){
alert("youareinthebottom");
}
});
代码测试有效果。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。