在无限滚动的页面上,您经常会遇到以下情况:
- 您滚动了很多次,
- 然后单击无限列表中的某个链接,
- 您不喜欢所点击的内容
- 那你回去吧
- 您想从离开的位置继续滚动。
- 但是您滚动的所有项目都不在那里,您需要再次滚动您已经看到的所有内容。
你如何处理这些情况?你知道有什么解决办法吗?有没有办法保存页面状态或至少知道这种情况是什么并加载适当数量的无限列表并将用户滚动到最后看到的项目。
最佳答案
当某个条件成立时滚动时,必须以某种方式加载要附加到页面的新内容,例如,您使用 ajax 调用来调用某个页面。假设每次加载更多数据时都会加载十个项目。因此,您当前的状态可能是您加载 10 个以上项目的次数。您可以保存该信息,例如通过使用 anchor :
www.site.tld/index.php?id=999#load_counter=5
另一种可能性是用 cookies 保存它。您可以尝试一下什么时候“保存”该数据是最好的。例如。每次 AJAX 调用之后或使用 onbeforeunload
事件离开页面时。
当您的页面加载时,您可以检查 cookie 或 url 中是否有可用的此类元数据。如果有,您可以通过发送加载之前加载的列表元素的 AJAX 请求来准确加载该内容。在我的示例中,这将是
5 * 10
因为 load_counter
为 5,每次加载时都会加载 10 个以上的项目。您还可以重建位置。也可以保存 how much the user has scrolled 的信息或者只是猜测假设用户正在查看最后一批加载的项目。例如。您可以滚动到元素(5-1)*10
。这是最后一批的第一个元素。
关于javascript - 网站无限滚动 - 在浏览器中用户 'go back' 之后返回滚动位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27987969/