欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2019年08月27日 11:33:06   作者:zhensg  
這篇文章主要介紹了jQuery實(shí)現(xiàn)判斷滾動條滾動到document底部的方法,結(jié)合實(shí)例形式分析了jQuery事件響應(yīng)及針對頁面元素屬性判斷的相關(guān)操作技巧,需要的朋友可以參考下

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

滾動條沒有實(shí)際的高度。只是為了呈現(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實(shí)現(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代碼運(yùn)行工具http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

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

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

相關(guān)文章

最新評論