【问题标题】：Infinite scroll on real-time data无限滚动实时数据
【发布时间】：2017-03-31 11:34:39
【问题描述】：

我正在尝试在 Web 应用程序中实现无限滚动，记录可能会从服务器添加或删除，按其 ID 的字母顺序排序，相关数据也可以随时更改，我必须显示最新数据.我了解无限滚动的工作原理以及如何显示一组固定对象的最新数据（在我的情况下，反复轮询它并将数据转储到视图中），但我无法理解如何集成两者。 API 使用游标，每次向我发送 20 条记录。请帮忙

【问题讨论】：

你试过什么？您遇到了什么具体问题？
如果您能够了解什么是可见的，什么是不可见的，您可以使用 FCM（Firebase 云消息传递）订阅和取消订阅主题（帖子），因为它旨在扩展到数十亿用户.然后，通过服务器更新的帖子将发送到该“主题”，如果您输入逻辑来更新数据，人们就可以看到帖子更新。

标签： javascript rest frontend infinite-scroll

【解决方案1】：

我想我了解您最关心的问题。实时更新的无限滚动是很难实现的。您必须仔细考虑并弄清楚您真正想要实现的目标。有几种情况需要考虑，为了简化，假设我们使用带有行的网格：

可见行已更改（编辑）
在可见行之间添加了一个新行（添加）
现有行已从可见行中移除（删除）
加载的行已更改（编辑）
在先前加载的行之间添加了一个新行，但它们不可见 - 我们向下滚动（添加）
已从加载的行中删除现有行（删除）
未加载行的任何更改都是微不足道的 - 因为我们仍然需要加载它

我认为这里最大的问题是对已加载但不可见的行进行操作。所做的任何更改都不会对用户可见。既然如此，你有没有考虑过虚拟滚动？所以只显示 10 行并在用户向上/向下滚动时替换它们。如果你真的想要无限滚动，最好的方法是通知用户，数据已经改变，你必须重新渲染整个无限滚动。在这种情况下，用户决定刷新已加载的数据。您可以抓取可见的内容并尝试计算要显示给他的内容（以通过添加/删除/编辑的行反映先前的状态）

【讨论】：

【解决方案2】：

基本上，您需要在可滚动容器中设置记录。然后使用一些 jquery 向下滚动容器，因为从 API 标注中添加了更多行。

这是我拥有的一些向下滚动列表的 javascript 代码。 css 需要设置溢出属性来实现这一点。

   function scrolllist(){


            //get the current width of the screen
            var width = document.body.clientWidth;
            var channelPanelWidth = 120;

            //get the height of the info container of the current video 
            var elem = document.getElementsByClassName("listInfoContainer")[0];


            $('#listContainer').animate({scrollLeft: nextScroll + "px"}, {duration: 1000, specialEasing: { width: 'linear', height: 'easeOutBounce'},
            complete: function (e) {

                //debug print
                //console.log("animation completed");
            }

        }


  #listContainer{
  display: inline-block;
  vertical-align: top;
  width: 196px;
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 510px;
  left: 0px;

}

nextscroll 变量将控制框滚动的程度。如果你想让它看起来像连续滚动，那么你只需要调整持续时间和 nextscroll 变量，以便在下次更新从 API 进来时它们还没有到达列表的末尾。

【讨论】：

【解决方案3】：

Socket.io 或 Google Cloud Messaging with Infinite Scroll

我自己来这里是为了想法，但因此，当没有适合您需求的答案时，您必须即兴发挥并自己想出一个。

典型的无限滚动行为

无限执行本质上是对一组分页数据进行查询，在滚动动量（向上或向下）之前显示行之前获取行。我在我的网络和 ios/android 中完美运行。

获取每个帖子的实时时间

在 socket.io 中执行此操作并使用“房间”概念使其正常工作后，我现在决定改用 GCM Google Cloud Messaging（或现在的 Firebase Cloud Messaging FCM）。

方法

我现在正在做的是在动量之前一次获取 20 条记录，并为用户订阅 20 个主题（帖子），当它们移出视图时，我会取消订阅它们在动量后面未查看的主题。如果动量增量太大，我会禁用它，直到它在界限内，因为超快速订阅/取消订阅是没有意义的，并且可能被视为对 FCM 的滥用。

然后，我根据与订阅的主题匹配的帖子 ID 在页面/设备上对我已加载的帖子进行哈希查找，并且帖子更新在消息包上具有帖子 ID，因此我可以快速更新统计信息基于这种方法的页面/应用程序。

我担心这会使 FCM 过载，但到目前为止它似乎具有惊人的可扩展性。顺便说一句，Firebase（任何东西）都非常出色，但 FB DB 在查询方面非常有限，这有点令人失望，所以我使用了其他云 DB。

【讨论】：