jQuery實(shí)現(xiàn)判斷滾動條滾動到document底部的方法分析
本文實(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ì)有所幫助。
- JavaScript實(shí)現(xiàn)的滾動公告特效【基于jQuery】
- JQuery獲取元素尺寸、位置及頁面滾動事件應(yīng)用示例
- Easyui 去除jquery-easui tab頁div自帶滾動條的方法
- jquery簡單實(shí)現(xiàn)縱向的無縫滾動代碼實(shí)例
- Jquery實(shí)現(xiàn)無縫向上循環(huán)滾動列表的特效
- jQuery實(shí)現(xiàn)當(dāng)拉動滾動條到底部加載數(shù)據(jù)的方法分析
- jQuery實(shí)現(xiàn)的簡單歌詞滾動功能示例
- 利用jquery和BootStrap實(shí)現(xiàn)動態(tài)滾動條效果
- jquery彈窗時禁止body滾動條滾動的例子
相關(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-03jquery.validate表單驗(yàn)證插件使用詳解
這篇文章主要為大家詳細(xì)介紹了jquery.validate表單驗(yàn)證插件的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06jquery獲取transform里的值實(shí)現(xiàn)方法
下面小編就為大家分享一篇jquery獲取transform里的值實(shí)現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12jQuery插件JWPlayer視頻播放器用法實(shí)例分析
這篇文章主要介紹了jQuery插件JWPlayer視頻播放器用法,結(jié)合實(shí)例形式分析了JWPlayer插件播放視頻的相關(guān)操作技巧,需要的朋友可以參考下2017-01-01JQuery 表單中textarea字?jǐn)?shù)限制實(shí)現(xiàn)代碼
textarea中的字?jǐn)?shù)的限制是在1000個之內(nèi),下面是具體的實(shí)現(xiàn)代碼,基本上會點(diǎn)jquery的能看懂,不懂的可以學(xué)習(xí)下jquery,當(dāng)期比較流行了,要不就落伍了。2009-12-12