是否可以编写一个可以处理后退按钮的"无限滚动"javascript？

Question

请访问:http://www.infinite-scroll.com/ 使用无限滚动播放.请注意,您无法单击链接,然后单击"返回".当你这样做时,它会有毛刺.

所以,我打算写自己的无限卷轴.

• 当用户到达底部时,加载AJAX调用.然后做一个JQuery"追加"结果到div.然后,在这些元素上调用我的其他函数.(我在javascript中设置了所有这些元素的背景图像).

这会有用吗？如果我这样做......我能处理后退按钮吗？

Answer 1

我在我从事的一个项目中也考虑过同样的事情。我想到的一个选择是允许后退按钮返回到单击链接的位置（就像正常浏览一样）。

首先，您需要记录无限滚动的哪一页，以便您可以再次加载到该部分。您可以通过巧妙地调整该window.location.hash值来做到这一点。如果您查看我对这个问题的回答，我会更详细地解释如何使用Asual 的地址插件在纯 JavaScript 或 jQuery 中执行此操作。

它的基本部分是这样的：

// Whatever you're using to load the next page
function scrollToNextPage(page){
   // Your infinite scrolling stuff
   $.address.parameter("currentPage", page);
}

$.address.externalChange(function(){
   var page = $.address.parameter("currentPage"),
       top = $.address.parameter("linkTop");

   loadAjaxUpTo(page);   
   $('html, body').animate({ scrollTop: top }, 500);
});

// Set a parameter for the location of a clicked link
$("a").live('click', function(){
   $.address.parameter("linkTop", $(this).scrollTop());
});

我没有实现最后一点（获取点击链接的位置），但我不明白为什么它不起作用。这将使窗口很好地滚动到您所在的位置。您始终可以将其设置为加载页面的锚点（但是当您滚动到它时，它始终会转到页面顶部）。

但有几点，我不推荐这个。至少对于我正在做的项目来说，这并不是真的必要。在我的项目中，我们期望用户返回更改他们的选项，并认为滚动不会成为问题（尽管我们没有那么多页面可以滚动）。AJAX（以及用于设置图像的 JavaScript）需要再次加载和执行，这需要花费大量时间，具体取决于需要重新加载的页面数量。除了滚动到链接的时间之外（您可以只是window.scrollTo但没有动画，所以一切都非常不稳定。您总是可以加载该人所在的页面并忘记以前的页面，但您仍然在这样就破坏了用户体验。或者（我尝试过的）是实现双向无限滚动。因此，如果用户prepend向上滚动，它将加载用户单击的页面和之前的页面 - 这对于它来说是太多的工作尽管。

另一点是，如果您仍然这样做，您需要使用请求GET来获取页面（并确保缓存没有设置为立即过期）。我发现 Ajax 使用 GET 请求请求的页面将从缓存中获取（至少在我尝试过的某些浏览器上）。通过 a 发送您的详细信息POST将始终忽略缓存。