Javascript LitElement无限滚动重新定位问题

我正在为限制列表DOM计数的LitElement无限滚动程序创建一个POC。该组件基于此组件：

我的POC在这里：

项目定位是通过在触发IntersectionObserver时调整填充和更新列表项目内容来实现的

当组件从上到下快速滚动时，工作正常。当您减慢滚动时，它有时会在达到IntersectionObserver的阈值之前添加填充。至于从下到上滚动，无论滚动速度是快还是慢，它的行为都是这样

---

我猜这是一个时间问题，但我无法准确指出具体位置。

我不确定自己重新发明轮子并实现无限滚动是否是一个好主意，但是对于你的代码来说，问题似乎出在

\u getNewTopItemIndex

方法中，特别是当

isScrollDown

为false时，你似乎有打字错误，因为这部分内容与你在问题中提到的中间帖子不一样

_getNewTopItemIndex(isScrollDown) {
  const increment = this.listSize / 2;
  const newIndex = isScrollDown
    ? this._top.index + increment
    : this._top.index - increment;  // original code: this._top.index - increment - this.listSize;

  return newIndex < 0 ? 0 : newIndex;
}

\u获取新的主题索引（isScrollDown）{
常量增量=this.listSize/2；
const newIndex=isScrollDown
？这._顶部索引+增量
：this.\u top.index-increment；//原始代码：this.\u top.index-increment-this.listSize；
返回newIndex<0？0:newIndex；
}

当元素卷轴和主体卷轴进行注释匹配时，似乎会产生少量的差异，这来自于您的示例中主体上的边距，

主体{margin:0}

似乎会将其清理干净，再加上Dipen的打字错误，看起来您已经很好地解决了这个问题

---

正如Dipen所说，我觉得

\u getNewTopItemIndex

可以优化，但如果您看到

lit visualizer

的话，实现这个功能非常困难

我建议您不要重新发明轮子，您可以使用

lit virtualizer

试一试

npm i lit-virtualizer

我认为您还需要一些其他的东西，您可以与项目合作（）

例子：

render（）{
返回html`
html`
${contact.name}:${contact.phone}
`}>
`;
}

哦，太好了！我以前没见过这个。谢谢谢谢你的接球！嗯，事实上，我试着用很慢的速度滚动，但还是发生了，它没有更新项目。