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");
}
});
代碼測試有效果。
感興趣的朋友可以使用在線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ì)有所幫助。
- 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)文章
jQuery插件FusionCharts實(shí)現(xiàn)的Marimekko圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts實(shí)現(xiàn)的Marimekko圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionCharts插件結(jié)合xml數(shù)據(jù)繪制Marimekko圖的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jquery.validate表單驗(yàn)證插件使用詳解
這篇文章主要為大家詳細(xì)介紹了jquery.validate表單驗(yàn)證插件的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06
jQuery實(shí)現(xiàn)表單提交時(shí)判斷的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)表單提交時(shí)判斷的方法,涉及針對表單提交時(shí)的判斷方法,是非常實(shí)用的技巧,需要的朋友可以參考下2014-12-12
jquery獲取transform里的值實(shí)現(xiàn)方法
下面小編就為大家分享一篇jquery獲取transform里的值實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
jQuery插件JWPlayer視頻播放器用法實(shí)例分析
這篇文章主要介紹了jQuery插件JWPlayer視頻播放器用法,結(jié)合實(shí)例形式分析了JWPlayer插件播放視頻的相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
JQuery 表單中textarea字?jǐn)?shù)限制實(shí)現(xiàn)代碼
textarea中的字?jǐn)?shù)的限制是在1000個(gè)之內(nèi),下面是具體的實(shí)現(xiàn)代碼,基本上會(huì)點(diǎn)jquery的能看懂,不懂的可以學(xué)習(xí)下jquery,當(dāng)期比較流行了,要不就落伍了。2009-12-12

