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

Question

去这里：http://www.infinite-scroll.com/ 玩无限卷轴。请注意，您不能单击链接然后单击“返回”。这样做时会出现故障。

所以，我打算自己写无限卷轴。

• 当用户到达底部时，加载 AJAX 调用。然后执行 JQuery 将结果“追加”到 div。然后，在这些元素上调用我的其他函数。 （我在 javascript 中设置了所有这些元素的背景图像）。

这行得通吗？如果我这样做......我可以处理后退按钮吗？

Answer 1

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

首先，您需要记录无限滚动的页面，以便您可以再次加载到该部分。您可以通过巧妙地使用window.location.hash 值来做到这一点。如果您查看my answer to this question，我会更详细地解释如何使用Asual's address plugin 在纯 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 请求请求的页面将从缓存中获取（至少在我尝试过的一些浏览器上）。通过POST 发送您的详细信息将始终忽略缓存。

Answer 2

能够处理后退按钮的唯一方法是更改​​位置哈希（# 符号后面的位）。可以通过两种方式处理按下后退和前进按钮：

1. 有一个<a name="bookmark1"></a>，对于添加的每个部分都是唯一的，并更改 location.hash 以匹配它。
2. 使用setInterval 和 100 毫秒这样的短时间来观察 location.hash 的变化并转到页面的所需部分。您必须这样做，因为您实际上无法检测到单击后退/前进按钮的时间。

这是第二种方法的实现，向您展示它是如何工作的。其中，每个ajax请求都包含<a name="ajax-section-1"></a>和ajax-section-2等。

function addToBottom(htmlToAdd) {
    $('#main-div').append(htmlToAdd);
    window.location.hash = $('#main-div a[name^=ajax-section-]').last().attr('name');
}