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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。