jQuery實現判斷滾動條滾動到document底部的方法分析

來源：懂視網責編：小采時間：2020-11-27 21:51:46

jQuery實現判斷滾動條滾動到document底部的方法分析

jQuery實現判斷滾動條滾動到document底部的方法分析:本文實例講述了jQuery實現判斷滾動條滾動到document底部的方法。分享給大家供大家參考，具體如下：滾動條沒有實際的高度。只是為了呈現效果才在外型上面有長度。在js當中也沒有提供滾動條的高度API。參考了網上有關資料：判斷滾動條到底部的基本邏輯是滾動

推薦度：

點擊下載本文 文檔為doc格式

導讀jQuery實現判斷滾動條滾動到document底部的方法分析:本文實例講述了jQuery實現判斷滾動條滾動到document底部的方法。分享給大家供大家參考，具體如下：滾動條沒有實際的高度。只是為了呈現效果才在外型上面有長度。在js當中也沒有提供滾動條的高度API。參考了網上有關資料：判斷滾動條到底部的基本邏輯是滾動

本文實例講述了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");
 }
});

代碼測試有效果。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

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

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com