這篇文章帶給大家的內容是關於js如何實現頁面的滾動條下拉時加載更多(附代碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
在手機上,數據列表的分頁都是下拉到底部的時候會加載更多,但是,去年三月份的時候遇到了客戶要求web頁面也要下拉加載更多的需求,於是按照web頁面在滾動條下拉時加載更多內容(個人項目經驗)文中的代碼實現了這個下拉加載,很簡單的,代碼如下:
var totalPages;//总页数 var pageno = 0;//当前页数 $(function(){ $(window).scroll(function() { var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height(); var positionValue = (scrollTop + windowHeight) - scrollHeight; if (positionValue == 0) { //do something if (pageno < totalPages - 1) { pageno++; doSomething(pageno); } else { alert('没有更多了'); } } }); ); function doSomething(pageno) { var url = "*******";//分页列表的接口 var data = { size: 5, start: pageno, }; $.getJSON(url, data, function (rtn) { }); }
但是,今天測試人員發現,當瀏覽器縮放了或螢幕顯示設定縮放時,就不能下拉載入了。時隔一年多,真是驚人@_@
經過調試,發現是有縮放時positionValue
的值就無法等於0了,沒辦法繼續加載更多了,這時看到一篇文章下拉載入更多DEMO(js實作)中講到:
看完後收到啟發,於是將positionValue的值設為大於等於-10,這裡的10也就是滾動條距離底部一定距離(C)的值。
果然,沒問題了,有縮放時也可以正常實作下拉載入。
於是,記錄下來,分享給大家,共勉。
另外提醒一點,$(window).scroll(function()監聽滾動事件不執行這個問題中的採納答案提到:
html,body的高度樣式如果設定為100%,$(window).scroll
方法將無法偵測到正確的滾出高度(0),導致捲動監聽事件失效,設定html,body{ height:auto }
可以解決。var totalPages;//总页数 var pageno = 0;//当前页数 var C = 10;//滚动条距离底部的距离 $(function(){ $(window).scroll(function() { var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height(); var positionValue = (scrollTop + windowHeight) - scrollHeight; if (positionValue >= -C) { //do something if (pageno < totalPages - 1) { pageno++; doSomething(pageno); } else { alert('没有更多了'); } } }); ); function doSomething(pageno) { var url = "*******";//分页列表的接口 var data = { size: 5, start: pageno, }; $.getJSON(url, data, function (rtn) { }); }
相關推薦:
jQuery向下捲動即時載入內容實作的瀑布流效果,jquery向下捲動
以上是js如何實作頁面的捲軸下拉時載入更多(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!