Javascript 是什么导致在IntersectionObserver上执行观察失败？

在IntersectionObserverAPI的帮助下，我正在开发一个纯JavaScript无限卷轴

可滚动项来自jsonplaceholder.typicode.com API

我最初加载5篇文章，然后每次滚动到底部时再加载5篇

class无限滚动{
构造函数（）{
this.postsContainer=document.querySelector（“#postsContainer”）；
this.visiblePosts=[]；
this.postsLot=[]；
this.observer=null；
this.hasNextPage=true；
这是postsUrlhttps://jsonplaceholder.typicode.com/posts';
这个极限=5；
this.iterationCount=0；
}
装货柱（）{
取回（this.postsUrl）
.then（res=>res.json（））
。然后（posts=>{
this.postsLot=posts.slice（this.iterationCount*this.limit，this.limit）；
//将项目添加到可见帖子的数组中
//每次迭代
如果（this.postsLot.length>0）{
this.postsLot.map（条目=>{
返回此.visiblePosts.push（条目）；
});
}
此.renderVisiblePosts（）；
})
.catch（err=>console.log（err））；
}
renderVisiblePosts（）{
让输出=“”；
this.visiblePosts.forEach（post=>{
输出+=`
${post.id}${post.title}
${post.body}

`;
});
this.postsContainer.innerHTML=输出；
}
getLastPost（）{
返回this.visiblePosts[this.visiblePosts.length-1]；
}
迭代计数器（）{
如果（此.hasNextPage）{
this.iterationCount=this.iterationCount+1；
}
}
bindLoadMoreObserver（）{
if（this.postsContainer）{
this.observer=新的IntersectionObserver（（条目，observer）=>{
entries.forEach（entry=>{
if（输入和输入.isIntersecting）{
console.log（'bottom'）；
观察者。未观察者（进入。目标）；
这是loadPosts（）；
这个.iterationCounter（）；
如果（此.hasNextPage）{
observer.observe（this.getLastPost（））；
}
}
});
});
this.observer.observe（this.getLastPost（））；
}
}
init（）{
这是getLastPost（）；
这是loadPosts（）；
this.bindLoadMoreObserver（）；
}
}
const infiniteScroll=新的infiniteScroll（）；
init（）
body，body*{
保证金：0；
填充：0；
}
身体{
字体系列：Arial、Helvetica、无衬线字体；
}
.邮政{
利润率：20px；
填充：15px；
边框：1px实心#ccc；
边界半径：5px；
}
p{
线高：1.5；
}
根据您当前的实现，您没有遵守
元素。您正在观察
visiblePosts
数组中的最后一个对象，该对象不是元素

您可以使用
this.postsContainer.lastElementChild
获取最后一个元素，前提是在此之前
this.postsContainer
具有子元素。
因此，我应该更改
getLastPost（）
？如果是，原因是什么？因为你的问题想知道原因，我现在只是简单地说了一下。要使代码真正工作，需要处理两件事。首先，当您绑定交叉点时，观察者很重要。您需要
postsContainer
具有实际的DOM元素，以便可以使用我在回答中所述的方法选择最后一个元素。只有这样你才能观察到最后一个元素。这也意味着，除非加载新帖子并将新帖子呈现为元素，否则您无法再次观察新添加的最后一个元素。我会选择另一个实现，其中有一个占位符元素作为列表的最后一个元素。每当该元素相交时，我加载更多元素，使其再次离开可见区域。当我向下滚动时，它再次出现在视图中，同样的事情发生了。我使用了
this.postsContainer.lastElementChild
。它不起作用（你看了我的全部评论了吗？只是更改它根本不起作用。IntersectionObserver的位置很重要。你无法观察到尚未存在的元素。观察应该在loadPosts返回新帖子并调用renderVisiblePosts（）后开始）。我会看看是否有时间更改您的代码，但我可能会以非常不同的方式执行此操作。