快捷導(dǎo)航

js實現(xiàn)滑動到頁面底部自動加載更多功能

更新時間：2017年02月15日 15:58:04 作者：denops

本文主要分享了js實現(xiàn)滑動到頁面底部自動加載更多功能的代碼。具有很好的參考價值，下面跟著小編一起來看下吧

話不多說，請看代碼：

//滾動條到頁面底部加載更多案例 
$(window).scroll(function(){
 var scrollTop = $(this).scrollTop();    //滾動條距離頂部的高度
 var scrollHeight = $(document).height();   //當(dāng)前頁面的總高度
 var clientHeight = $(this).height();    //當(dāng)前可視的頁面高度
 // console.log("top:"+scrollTop+",doc:"+scrollHeight+",client:"+clientHeight);
 if(scrollTop + clientHeight >= scrollHeight){   //距離頂部+當(dāng)前高度 >=文檔總高度 即代表滑動到底部 count++;         //每次滑動count加1
 filterData(serviceTypeId,industryId,cityId,count); //調(diào)用篩選方法，count為當(dāng)前分頁數(shù)
 }else if(scrollTop<=0){ 
 //滾動條距離頂部的高度小于等于0 TODO
 //alert("下拉刷新，要在這調(diào)用啥方法？");
 }
});

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Javascript 判斷是否存在函數(shù)的方法
Javascript 判斷是否存在函數(shù)，此功能如何實現(xiàn)，接下來為您介紹解決方法，需要了解的朋友可以參考下
2013-01-01
使用IE的地址欄來輔助調(diào)試Web頁腳本
使用IE的地址欄來輔助調(diào)試Web頁腳本...
2007-03-03
javascript中數(shù)組（Array)對象和字符串（String)對象的常用方法總結(jié)
這篇文章主要介紹了javascript中數(shù)組（Array)對象和字符串（String)對象的常用方法,結(jié)合實例形式總結(jié)分析了javascript中關(guān)于數(shù)組和字符串的常用函數(shù)與使用技巧,需要的朋友可以參考下
2016-12-12
JS獲得鼠標(biāo)位置（兼容多瀏覽器ie,firefox）腳本之家修正版
這段代碼經(jīng)過測試，支持ie和ff是個不錯的代碼，并修正了錯誤，希望大家先運行測試下
2008-11-11
使用Javascript判斷瀏覽器終端設(shè)備(PC、IOS(iphone)、Android)
WEB開發(fā)中如何通過Javascript來判斷終端為PC、IOS(iphone)、Android呢?可以通過判斷瀏覽器的userAgent，用正則來判斷手機是否是ios和Android客戶端,下面通過本文學(xué)習(xí)下吧
2017-01-01
開啟Javascript中apply、call、bind的用法之旅模式
在Javascript中，F(xiàn)unction是一種對象。Function對象中的this指向決定于函數(shù)被調(diào)用的方式,使用apply，call 與 bind 均可以改變函數(shù)對象中this的指向。
2015-10-10
javascript實現(xiàn)圖片循環(huán)漸顯播放的方法
這篇文章主要介紹了javascript實現(xiàn)圖片循環(huán)漸顯播放的方法,涉及javascript操作圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
微信小程序picker組件下拉框選擇input輸入框的實例
這篇文章主要介紹了微信小程序picker組件下拉框選擇input輸入框的實例的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下
2017-09-09
總結(jié)js中的一些兼容性易錯的問題
下面小編就為大家分享一篇總結(jié)js中的一些兼容性易錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2017-12-12
關(guān)于ckeditor在bootstrap中modal中彈框無法輸入的解決方法
今天小編就為大家分享一篇關(guān)于ckeditor在bootstrap中modal中彈框無法輸入的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09