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

时间:2020-05-17 zhensg 人气:0

本文实例讲述了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程序设计有所帮助。

加载全部内容