实现逻辑以跳转到无限滚动列表中的特定项目

时间:2019-04-17 17:47:13

标签: javascript angular

我有一个Angular论坛应用程序,该应用程序通过无限滚动加载评论。我想实现允许用户跳到特定评论的逻辑,类似于Discourse处理该逻辑的方式。要查看实际效果,请访问this Discourse page,然后在右侧的垂直时间轴栏上向下拖动以跳转到某个帖子。

使用chrome工具进行检查后,看起来它们加载了一个帖子列表(某些帖子在实际帖子的上方和下方),如下所示:

nuget list

我相信他们会在您需要发布的帖子之前加载一些帖子,以确保您可以向上滚动并在向上滚动时触发无限滚动。所以我的问题是...

如何使用Angular加载一组数据但使这些项目的显示偏移以在页面顶部的列表中向下显示一个项目?

作为使用上述数据数据集的示例,我使用“话语”滚动条跳转到特定帖子。我实际上想看的帖子是在<div class="posts"> <div class="post-1">...</div> <div class="post-2">...</div> <div class="post-3">...</div> <div class="post-4">...</div> <--post I want to see <div class="post-5">...</div> <div class="post-6">...</div> <div class="post-7">...</div> <div class="post-8">...</div> <div class="post-9">...</div> <div class="post-10">...</div> </div> 类中,因此,当我的应用显示数据时,它会使post-4偏移以在顶部显示posts,但是如果我向上滚动,则会看到{ {1}}。

为提供帮助,以下是我的视频,向您展示Discourse如何抵消正在加载的帖子(实际上,您选择的帖子不是数据库返回列表顶部的帖子):

https://streamable.com/l0t8p

是否要向要在页面顶部查看的html元素添加一个post-4标记并将其链接到我的post-3,2,1中的#post元素?

0 个答案:

没有答案