Javascript中包含文件中数据的无限滚动

我想在纯Javascript中实现无限滚动。我看了几个教程，但都是从一些api获取一些随机数据。我理解教程中的代码，但我不知道如何按顺序获取数据，而不是随机获取数据

我想做类似的事情：但我想使用本地文件中的数据。让我们假设它是data.js，并且有类似的代码：

data = [{}, {}] 

这是一个对象数组，假设对象的内容如下：

---

如何将此代码笔中的代码更改为按顺序逐个显示帖子？我想，函数getPost应该有参数“id”，每次调用这个函数时，参数应该是+1？但是怎么做呢？或者我应该遍历data.js，每次迭代时检查用户是否滚动到底？

您只需更改

getPost（）

函数，即可使用包含所有可用帖子的内联

blog\u数据。当前偏移量保存在全局变量
post\u offset
中，该变量每调用一次
getPost（）
都会增加，因此顺序将保持不变，并且不会多次显示post


//所有可用的博客条目
const blog_数据=[{
标题：“博客条目1”，
正文：“这是条目1的正文文本示例。”
},{
标题：“这是第二号”，
正文：“第2条博客也有一些内容。”
},{
标题：“博客条目三”，
正文：“我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是。”
},{
标题：“博客第四条”，
正文：“我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是。”
},{
标题：“博客条目五”，
正文：“我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是。”
},{
标题：“博客第六条”，
正文：“我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是，我的名字是。”
}];
const container=document.getElementById（'container'）；
常量加载=document.querySelector（'.load'）；
设post_offset=0；
getPost（）；
getPost（）；
getPost（）；
window.addEventListener（'scroll'，（）=>{
const{scrollTop，scrollHeight，clientHeight}=document.documentElement；
if（clientHeight+scrollTop>=滚动高度-5）{
//显示加载动画
showLoading（）；
}
});
函数showLoading（）{
if（post_offset${data.body}

`;
container.appendChild（postElement）；
loading.classList.remove（'show'）；
}
@导入url（'https://fonts.googleapis.com/css?family=Open+Sans:300600&display=swap'）；
* {
框大小：边框框；
}
身体{
背景色：#fafafa；
字体系列：“开放式Sans”，无衬线；
填充底部：100px；
}
.集装箱{
保证金：0自动；
最大宽度：600px；
}
.博客帖子{
背景色：#fff；
盒影：0px 1px 2px rgba（50,50,50,1），0px 2px 4px rgba（60,60,0.1）；
边界半径：4px；
填充：40px；
利润率：20px0；
}
.标题{
保证金：0；
}
.文本{
颜色：#555；
利润率：20px0；
}
.装货{
不透明度：0；
显示器：flex；
位置：固定；
底部：50px；
左：50%；
转化：translateX（-50%）；
过渡：不透明度。3秒容易；
}
.装货{
不透明度：1；
}
.球{
背景色：#777；
边界半径：50%；
保证金：5px；
高度：10px；
宽度：10px；
动画：跳跃。5s无限轻松；
}
.球：第n种类型（2）{
动画延迟：0.1s；
}
.球：第n种类型（3）{
动画延迟：0.2s；
}
@关键帧跳跃{
0%, 100% {
变换：translateY（0）；
}
50% {
转换：translateY（-10px）；
}
}

博客帖子
警告：无限滚动比你显示的更难，因为你不能有一个页脚（你的用户永远也找不到页脚），你需要确保点击“后退”的人最终会将他们传递的所有数据加载回，滚动到他们离开之前的位置。