这篇文章将为大家详细讲解有关jQuery怎么实现判断滚动条滚动到document底部，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
本文实例讲述了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");
}
});代码测试有效果。
关于“jQuery怎么实现判断滚动条滚动到document底部”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
