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

Question

我在實現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，但是它不會觸發嘗試滾動到“不存在的空間”。

Answer 1

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

Answer 2

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

Answer 3

因此，經過一些嘗試並嘗試了其他解決方案后，似乎有一個簡單且相當明顯的解決方案。 如果我增加了滾動的余量，即從問題中的20像素增加到200，它將始終觸發，無論滾動的速度如何，或者如果我在屏幕到達頁面底部200像素以內之前釋放屏幕。

我不知道該事件何時觸發或為何起作用。 無論哪種方式，它都可以正常工作，並且比20更大的余量可能會更好，因為它會在用戶看到所有現有內容之前就開始加載新內容。