在移動設備上無休止的滾動

我在執行jQuery Mobile應用程序中的列表無盡滾動時遇到了一些麻煩。我現在使用的代碼是這樣的：在移動設備上無休止的滾動

$(window).on('scrollstop', function() { 
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 20) { 
    if(scrollLoad && currentPage < totalPages) 
    { 
     $.mobile.showPageLoadingMsg(); 
     ShowMoreThings(); 
     scrollLoad = false; //Is set to true on ajax success in ShowMoreThings(). 
    } 
    } 
});

但是這並不會導致刷新始終觸發。問題似乎是，只要用戶釋放屏幕就會觸發事件，並且視口在此之後繼續移動（由於滾動通常在移動設備上運行）。然後，事件將在移動時計算位置，並且不觸發刷新，因爲它尚未達到底部。然後，當視口位於頁面底部時，如果用戶因視口不移動而嘗試向下滾動，則不會觸發其他滾動事件。爲了觸發它，我需要稍微向上滾動然後再滾動。

我也試着聽scrollstart，但它並沒有觸發試圖滾動到「不存在的空間」。

來源

2012-09-24 EasyPush

因此，經過一些試驗和嘗試其他解決方案後，似乎有一個簡單而明顯的問題解決方案。如果我增加了滾動的邊距，即從問題的20個像素到200，它總是會觸發，無論滾動的速度如何，還是在頁面底部的200像素之內釋放屏幕。

我不知道什麼時候事件觸發或爲什麼它的作品。無論哪種方式，它現在有效，並且具有大於20的餘量可能更好，因爲它在用戶已經看到所有現有內容之前開始加載新內容。

來源

2012-09-25 06:36:10 EasyPush

這是因爲狀態欄和菜單欄包含在'$（window）.height（）'中嗎？ – user123444555621

我不這麼認爲。因爲它的確能夠處理20px的邊際效果，但只有當我慢慢滾動時才行。我猜這個事件的時間是在20px間隔內觸發的。 – EasyPush

我發現使用onscroll事件綁定我在jquery mobile中無盡的滾動更可靠。

來源

2012-09-24 15:31:04 Romain

說明：如果滾動沒有停止，您將不會觸發'scrollstop'事件;你需要在滾動停止之前綁定其他的東西來觸發。 –

這給出了與我已經使用的scrollstop解決方案完全相同的行爲。它觸發，如果我滾動足夠慢，但不是如果我加快列表。 – EasyPush

看看jQuery的航點http://imakewebthings.com/jquery-waypoints/。您可以使用航點來觸發更多數據的獲取。

來源

2012-09-24 15:59:36 codemonkey

感謝您的建議。這個解決方案看起來應該是可行的，但我不能真正讓它以令人滿意的方式工作。另外，我不希望使用更多的插件，這應該是可以不使用這個插件。 – EasyPush

在移動設備上無休止的滾動

回答

相關問題