jQuery實現(xiàn)判斷滾動條滾動到document底部的方法分析

更新時間：2019年08月27日 11:33:06 作者：zhensg

這篇文章主要介紹了jQuery實現(xiàn)判斷滾動條滾動到document底部的方法,結(jié)合實例形式分析了jQuery事件響應(yīng)及針對頁面元素屬性判斷的相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)判斷滾動條滾動到document底部的方法。分享給大家供大家參考，具體如下：

滾動條沒有實際的高度。只是為了呈現(xiàn)效果才在外型上面有長度。

在js當(dāng)中也沒有提供滾動條的高度API。

參考了網(wǎng)上有關(guān)資料：判斷滾動條到底部的基本邏輯是滾動條滾動的高度加上視口的高度，正好是document的高度，公式表示為

滾動條滾動的高度+瀏覽器視口的高度>=document的高度。

參考網(wǎng)上資料，具體代碼如下：

//滾動條在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實現(xiàn)代碼：

$(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測試上述代碼運行效果。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: