今天需要做一個異步鼠標滾動加載,以前做瞭幾個,但是全部都是純js寫出來的而且也不記得放到那個文件還是項目中去瞭(本人懶得整理)。
本來打算自己寫再寫一個,正準備動手時,突然發現,我很悲慘,那個鼠標滾動事件不記得是哪個瞭[老瞭,記性差],隻好百度或者谷歌一下啊!這一查倒是查到方法瞭,
不過附帶瞭發現瞭很多可以直接用的插件例如:jquery.endless-scroll,paulirish-infinite-scroll很多很多啊~多的自己都不好選那個瞭。最後本人還是懶得想瞭直接自己再寫一個吧
強大的jquery中有個一個scroll的方法,文檔中介紹和說明是這樣的啊!
“在每一個匹配元素的scroll事件中綁定一個處理函數。當滾動條發生變化時觸發”關鍵是後面一句,滿足條件暫時就用它瞭
這個dome我就拿window對象來做[本人開發需要]
www.aiwalls.com
1 $(document).ready(function () { //本人習慣這樣寫瞭
2 $(window).scroll(function () {
3 //$(window).scrollTop()這個方法是當前滾動條滾動的距離
4 //$(window).height()獲取當前窗體的高度
5 //$(document).height()獲取當前文檔的高度
6 var bot = 50; //bot是底部距離的高度
7 if ((bot + $(window).scrollTop()) >= ($(document).height() – $(window).height())) {
8 //當底部基本距離+滾動的高度〉=文檔的高度-窗體的高度時;
9 //我們需要去異步加載數據瞭
10 $.getJSON("url", { page: "2" }, function (str) { alert(str); });
11 }
12 });
13 });
補充一下 在外包定義一個var scrollH = 0; //上次滾動的位置記錄
並且那個判斷應修改成(bot + $(window).scrollTop()) >= ($(document).height() – $(window).height()) && $(window).scrollTop() > scrollH
可能會更好
其實,這篇文章可能沒什麼好寫的,唯一有一丁點價值就是說明那個$(window).height()和$(document).height()的區別。
對瞭,補充一句$(window).scrollTop()和$(document).scrollTop()是沒什麼區別的,至少我在IE8中沒發現是不一樣的.
新發現一個問題,我的這個滾動方法不知為什麼會執行兩次,求助大傢啊~~
摘自 明天的天亮