Angular2 Meteor，实现无限滚动的问题（滚动重置到顶部）

Posted 2023-03-08

【中文标题】Angular2 Meteor，实现无限滚动的问题（滚动重置到顶部）

【英文标题】：Angular2 Meteor, issue implementing infinite scroll (scroll reset to top)

【发布时间】：2017-02-17 13:53:04

【问题描述】：

尝试做一个无限滚动页面，在用户滚动时显示元素。

所以每次我检测到滚动到达我调用的页面末尾时

this.recordLimit += 10;
this.subscribe('movements', limit: this.recordLimit);

然后触发（自动运行）

        this.autorun(h => 
            if (this.ready()) 
                this.items = Items.find(<potential limit filter here too>);
            

好的。那是有效的。但是每次调用this.items = Items.find(); 时，用户的浏览器都会向上滚动到顶部。

这可能是因为移除了 dom 元素，重置了滚动，然后再次添加了元素，而没有恢复之前的滚动位置。

我做错了什么？

“明显”工作的示例：

https://github.com/barbatus/ng-infinite-scroll/blob/master/scroll-controller.js https://github.com/abecks/meteor-infinite-scroll http://meteorpedia.com/read/Infinite_Scrolling

@###########编辑############@

实际上，我注意到，在Items.find() 之后加上h.stop() 以停止订阅，这可行...我猜以前的芒果光标已更新为最后的订阅限制。

但是我仍然无法理解为什么这会在最初的情况下重新绘制所有内容..

【参考方案1】：

我认为问题在于您再次找到了您所猜测的文档。您应该只在自动运行中订阅您的出版物。查看 Angular2 和 Meteor 教程中的 this，它很好地解释了 pub/sub。

在自动运行中，它会重新运行find() 并重新渲染所有文档，这就是为什么您只需要在自动运行中为您的案例重新运行订阅。由于 pub/sub 和观察者的工作方式，由于您唯一更改的是函数中的“限制”，其余部分相同，因此您的发布将仅返回新文档，并保留先前返回的文档。客户端的find() 查询将获取从 pub/sub 返回的文档，并且不会在文档数量发生变化时重新呈现已获取的文档。

【讨论】：

我不明白“你应该只订阅你的出版物”，更确切地说是“应该”和“唯一”。在自动运行中订阅是一种好的做法还是需要的？

@ATX 因为观察者的工作方式。假设您返回 20 个文档，然后使用滚动，您将限制更改为 40，如果您在自动运行中订阅并返回不在自动运行中的文档，它将不会重新呈现先前获取的 20 个文档。我对按钮单击或无限滚动具有相同的功能。

@ATX 更清楚一点，订阅将文档返回到客户端，而不是应用程序中的特定位置，但使它们在客户端可用。因此，自从您更改限制后，您将自动运行订阅。然后发布获取查询，由于唯一的变化是限制，它返回 XX 更多文档。由于您在更改限制之前已经有 xx 个文档，并且您没有在自动运行中返回它们，因此它可以正常运行以及为什么它是“正确”的做法

我会标记你的答案。但是请注意，使用 ng 发布版本（带有 rxjs）我的解决方案是使用响应变量作为限制变量，并将 both sub 和 find 放在同一个自动运行中。到那时就达到了预期的结果。