jQuery怎么實現判斷滾動條滾動到document底部

這篇文章將為大家詳細講解有關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底部”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。