建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
有些需求中，需要當(dāng)用戶(hù)滾動(dòng)到瀏覽器底部的時(shí)候，再加載新的內(nèi)容。筆者在這里介紹如何使用Jquery判斷用戶(hù)是否已經(jīng)瀏覽到網(wǎng)頁(yè)的底部了。
10年積累的成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)制作后付款的網(wǎng)站建設(shè)流程，更有黑山免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
在了解下面的知識(shí)點(diǎn)之前，筆者這里先介紹幾個(gè)概念。
- $(window).height(); //用于獲取瀏覽器顯示區(qū)域的高度
- $(window).width(); //用于獲取瀏覽器顯示區(qū)域的寬度
- $(document.body).height(); //獲取頁(yè)面文檔的高度
- $(document.body).width(); //獲取頁(yè)面文檔的寬度
- $(document).scrollTop(); //獲取垂直滾動(dòng)條到頂部的垂直距離
- $(document).scrollLeft(); //獲取水平滾動(dòng)條到左邊的水平距離
通過(guò)上面的知識(shí)點(diǎn)，可以知道：瀏覽器顯示區(qū)域的高度+垂直滾動(dòng)條距離頂部距離<=網(wǎng)頁(yè)的高度。
有了這個(gè)結(jié)論，那么實(shí)現(xiàn)起來(lái)就容易了。下面的代碼實(shí)現(xiàn)了，判斷用戶(hù)是否瀏覽到了網(wǎng)頁(yè)的底部。
- $(window).scroll(function(){
- var h=$(document.body).height();//網(wǎng)頁(yè)文檔的高度
- var c = $(document).scrollTop();//滾動(dòng)條距離網(wǎng)頁(yè)頂部的高度
- var wh = $(window).height(); //頁(yè)面可視化區(qū)域高度
- if (Math.ceil(wh+c)>=h){
- alert("我已經(jīng)到底部啦");
- }
- })
如果需要判斷用戶(hù)是否已經(jīng)瀏覽到某個(gè)元素的話(huà)，那么只需要把上面的網(wǎng)頁(yè)文檔高度，換成某一個(gè)元素距離網(wǎng)頁(yè)頂部的距離就可以了。例如：
- $(window).scroll(function(){
- var h=$("#div").offset().top;//id為div的元素距離網(wǎng)頁(yè)頂部的距離
- var c = $(document).scrollTop();//滾動(dòng)條距離網(wǎng)頁(yè)頂部的高度
- var wh = $(window).height(); //頁(yè)面可視化區(qū)域高度
- if (Math.ceil(wh+c)>=h){
- alert("我已經(jīng)到底部啦");
- }
- })
在這里讀者需要注意，判斷條件中，wh+c取得是滿(mǎn)足大于等于該數(shù)字的最小整數(shù)。經(jīng)過(guò)筆者的測(cè)試，在IE7、8、9、11上都沒(méi)有問(wèn)題。
接下來(lái)筆者把上面的代碼封裝為一個(gè)插件。
- (function ($) {
- //backcall是回調(diào)函數(shù)，count表示回調(diào)函數(shù)被執(zhí)行的次數(shù)，count只有元素在屏幕范圍之外的時(shí)候才起作用
- $.fn.inBottom = function (backcall){
- //判斷當(dāng)前元素是否在目前屏幕可視化區(qū)域之內(nèi)
- if(this.offset().top >= $(window).height()){
- this.inScroll(backcall,count);
- }else{
- this.inWindow(backcall);
- }
- };
- //直接加載回調(diào)函數(shù)
- $.fn.inWindow = function (backcall){
- backcall();
- };
- //滾動(dòng)監(jiān)聽(tīng)滑動(dòng)條，元素滾動(dòng)到屏幕底部的時(shí)候，加載回調(diào)函數(shù)
- $.fn.inScroll = function (backcall,count) {
- var $this=this;
- $(window).scroll(function(){
- //獲得這個(gè)元素到文檔頂部的距離
- var awayDocTop=$this.offset().top;
- //獲得滾動(dòng)條的top
- var sTop=$(document).scrollTop();
- //獲得可視化窗口的高度
- var wh=$(window).height();
- if(Math.ceil(wh+sTop)>=awayDocTop){
- if(count>0){
- backcall();
- count--;
- }
- };
- });
- };
- })(jQuery);
然后讀者在引入上面的插件文件后，就可以通過(guò)類(lèi)似于下面的代碼調(diào)用了。
- $("#div").inBottom(function(){
- alert("我被回調(diào)了");
- },1);
文章名稱(chēng)：如何判斷網(wǎng)頁(yè)是否已經(jīng)滾動(dòng)到瀏覽器底部了
分享鏈接：http://m.5511xx.com/article/dpesged.html
