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

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

您可能感興趣的文章:

相關(guān)文章

JavaScript表單焦點自動切換代碼
這篇文章主要介紹了JavaScript表單焦點自動切換代碼的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-07-07
javascript十六進制及二進制轉(zhuǎn)化的方法
這篇文章主要介紹了javascript十六進制及二進制轉(zhuǎn)化的方法,涉及javascript中toString方法的使用技巧,需要的朋友可以參考下
2015-05-05
JavaScript繼承方式實例
JavaScript繼承方式實例，需要的朋友可以參考下。
2010-10-10
JS獲取時間的相關(guān)函數(shù)及時間戳與時間日期之間的轉(zhuǎn)換
時間戳和時間日期的轉(zhuǎn)換是常見的操作，下面就通過代碼實例介紹一下如何實現(xiàn)它們之間的相互轉(zhuǎn)換，感興趣的朋友一起學習吧
2016-02-02
JS如何循環(huán)遍歷JSON數(shù)據(jù)
這篇文章主要介紹了JS如何循環(huán)遍歷JSON數(shù)據(jù)的方法,本文提供了 JS 循環(huán) JSON 數(shù)據(jù)列,以及 JS 循環(huán)遍歷 JSON 數(shù)據(jù)的例子,需要的朋友可以參考下
2024-01-01
JS實現(xiàn)的DOM插入節(jié)點操作示例
這篇文章主要介紹了JS實現(xiàn)的DOM插入節(jié)點操作,結(jié)合實例形式分析了javascript針對頁面dom元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2018-04-04
Javascript類庫的頂層對象名用戶體驗分析
針對jQuery、Ext、KISSY三者類庫的對比及分析已經(jīng)很多了，但多數(shù)是從功能和設(shè)計的角度切入，因此本篇文章決定換一個特殊的角度，從各類庫的頂層對象名的鍵盤輸入的體驗上來對這三個類庫進行比較。
2010-10-10
原生JS仿QQ閱讀點擊展開、收起效果
這篇文章主要為大家詳細介紹了原生JS仿QQ閱讀點擊展開、收起效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
TS?中?never,void,unknown類型詳解
這篇文章主要介紹了TS?中?never,void,unknown類型詳解,never?類型是 TypeScript 中的底層類型，unknown是TypeScript中比較特殊的一種類型，它用于描述類型不確定的變量，本文給大家介紹的非常詳細，需要的朋友可以參考下
2023-05-05
js轉(zhuǎn)換對象為xml
本文主要介紹了js轉(zhuǎn)換對象為xml的方法。具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02