jQuery實(shí)現(xiàn)判斷滾動(dòng)條滾動(dòng)到document底部的方法分析
本文實(shí)例講述了jQuery實(shí)現(xiàn)判斷滾動(dòng)條滾動(dòng)到document底部的方法。分享給大家供大家參考,具體如下:
滾動(dòng)條沒有實(shí)際的高度。只是為了呈現(xiàn)效果才在外型上面有長度。
在js當(dāng)中也沒有提供滾動(dòng)條的高度API。
參考了網(wǎng)上有關(guān)資料:判斷滾動(dòng)條到底部的基本邏輯是滾動(dòng)條滾動(dòng)的高度加上視口的高度,正好是document的高度,公式表示為
滾動(dòng)條滾動(dòng)的高度+瀏覽器視口的高度>=document的高度。
參考網(wǎng)上資料,具體代碼如下:
//滾動(dòng)條在Y軸上的滾動(dòng)距離
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");
}
});
代碼測(cè)試有效果。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- JavaScript實(shí)現(xiàn)的滾動(dòng)公告特效【基于jQuery】
- JQuery獲取元素尺寸、位置及頁面滾動(dòng)事件應(yīng)用示例
- Easyui 去除jquery-easui tab頁div自帶滾動(dòng)條的方法
- jquery簡單實(shí)現(xiàn)縱向的無縫滾動(dòng)代碼實(shí)例
- Jquery實(shí)現(xiàn)無縫向上循環(huán)滾動(dòng)列表的特效
- jQuery實(shí)現(xiàn)當(dāng)拉動(dòng)滾動(dòng)條到底部加載數(shù)據(jù)的方法分析
- jQuery實(shí)現(xiàn)的簡單歌詞滾動(dòng)功能示例
- 利用jquery和BootStrap實(shí)現(xiàn)動(dòng)態(tài)滾動(dòng)條效果
- jquery彈窗時(shí)禁止body滾動(dòng)條滾動(dòng)的例子
相關(guān)文章
針對(duì)后臺(tái)列表table拖拽比較實(shí)用的jquery拖動(dòng)排序
這篇文章主要為大家詳細(xì)介紹了比較實(shí)用的jquery拖動(dòng)排序,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10
jquery實(shí)現(xiàn)全選和全不選功能效果的實(shí)現(xiàn)代碼【推薦】
下面小編就為大家?guī)硪黄猨query實(shí)現(xiàn)全選和全不選功能效果的實(shí)現(xiàn)代碼【推薦】。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-05-05
jQuery動(dòng)態(tài)生成的元素綁定事件操作實(shí)例分析
這篇文章主要介紹了jQuery動(dòng)態(tài)生成的元素綁定事件操作,結(jié)合實(shí)例形式分析了jQuery事件綁定的原理及動(dòng)態(tài)生成的元素綁定事件相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
JQuery EasyUI 日期控件如何控制日期選擇區(qū)間
這篇文章主要介紹了JQuery EasyUI 日期控件如何控制日期選擇區(qū)間,需要的朋友可以參考下2014-05-05
jQuery中noconflict函數(shù)的實(shí)現(xiàn)原理分解
這篇文章主要介紹了jQuery中noconflict函數(shù)的實(shí)現(xiàn)原理分解,noconflict是用來防止變量沖突的,本文就分解了它的實(shí)現(xiàn)原理,并分析了它的實(shí)現(xiàn)源碼,需要的朋友可以參考下2015-02-02
jquery實(shí)現(xiàn)表格行拖動(dòng)排序
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)表格行拖動(dòng)排序,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02
jQuery實(shí)現(xiàn)按鈕點(diǎn)擊遮罩加載及處理完后恢復(fù)的效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)按鈕點(diǎn)擊遮罩加載及處理完后恢復(fù)的效果,涉及jQuery與asp.net后臺(tái)交互實(shí)現(xiàn)頁面效果動(dòng)態(tài)變換的相關(guān)技巧,需要的朋友可以參考下2016-06-06
jquery.lazyload 實(shí)現(xiàn)圖片延遲加載jquery插件
看到了淘寶產(chǎn)品介紹中,圖片是在下拉滾動(dòng)條時(shí)加載,這是一個(gè)很不錯(cuò)的用戶體驗(yàn)。減少了頁面加載的時(shí)間了,也減輕了服務(wù)器的壓力,就查了下用JQuery..2010-02-02
jQuery實(shí)現(xiàn)響應(yīng)瀏覽器縮放大小并改變背景顏色
這篇文章主要介紹了jQuery實(shí)現(xiàn)響應(yīng)瀏覽器縮放大小并改變背景顏色,比較實(shí)用,也很簡單,使用到了一個(gè)resize事件需要的朋友可以參考下2014-10-10

