jQuery实现判断滚动条滚动到document底部的方法分析

来源：懂视网责编：小采时间：2020-11-27 21:51:46

jQuery实现判断滚动条滚动到document底部的方法分析

jQuery实现判断滚动条滚动到document底部的方法分析:本文实例讲述了jQuery实现判断滚动条滚动到document底部的方法。分享给大家供大家参考，具体如下：滚动条没有实际的高度。只是为了呈现效果才在外型上面有长度。在js当中也没有提供滚动条的高度API。参考了网上有关资料：判断滚动条到底部的基本逻辑是滚动

推荐度：

点击下载本文 文档为doc格式

导读jQuery实现判断滚动条滚动到document底部的方法分析:本文实例讲述了jQuery实现判断滚动条滚动到document底部的方法。分享给大家供大家参考，具体如下：滚动条没有实际的高度。只是为了呈现效果才在外型上面有长度。在js当中也没有提供滚动条的高度API。参考了网上有关资料：判断滚动条到底部的基本逻辑是滚动

本文实例讲述了jQuery实现判断滚动条滚动到document底部的方法。分享给大家供大家参考，具体如下：

滚动条没有实际的高度。只是为了呈现效果才在外型上面有长度。

在js当中也没有提供滚动条的高度API。

参考了网上有关资料：判断滚动条到底部的基本逻辑是滚动条滚动的高度加上视口的高度，正好是document的高度，公式表示为

滚动条滚动的高度+浏览器视口的高度>=document的高度。

参考网上资料，具体代码如下：

//滚动条在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;
 windowHeight = document.documentElement.clientHeight;
 return windowHeight;
}
window.onscroll = function() {
 if (getScrollTop() + getWindowHeight() == getScrollHeight()) {
 alert("you are in the bottom!");
 }
};

jquery实现代码：

$(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");
 }
});

代码测试有效果。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com