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的余量可能更好，因为它在用户看到所有现有内容之前开始加载新内容。

在移动设备上无休止地滚动

3 个答案: