javascript - 网站无限滚动 - 在浏览器中用户 'go back' 之后返回滚动位置

标签 javascript ajax scroll infinite-scroll dynamic-pages

在无限滚动的页面上,您经常会遇到以下情况:

  • 您滚动了很多次,
  • 然后单击无限列表中的某个链接,
  • 您不喜欢所点击的内容
  • 那你回去吧
  • 您想从离开的位置继续滚动。
  • 但是您滚动的所有项目都不在那里,您需要再次滚动您已经看到的所有内容。

你如何处理这些情况?你知道有什么解决办法吗?有没有办法保存页面状态或至少知道这种情况是什么并加载适当数量的无限列表并将用户滚动到最后看到的项目。

最佳答案

当某个条件成立时滚动时,必须以某种方式加载要附加到页面的新内容,例如,您使用 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/

相关文章:

javascript - 使用 return false 会阻止我的 AJAX 调用执行,删除它可以修复它,但页面会刷新

javascript - 在顶部添加元素时保持滚动位置在 Firefox 中有效,但在 Chrome 中无效

javascript - 如何在滚动上为 div 设置动画?

javascript - 在 Angular CLI 项目中导入 SVG 文件?

javascript - 最好的ajax教程网站是什么

javascript - 我的网络应用程序在 Google Chrome 中非确定性崩溃

javascript - Javascript 中如何定义当前 GMT 时区?

javascript - 从弹出模式中选择单选值,无需重新加载页面

javascript - 使用ajax在按下按钮然后刷新时调用php函数

Android 水平 ScrollView 的行为类似于 iPhone(分页)