javascript - LitElement 无限滚动重定位问题

Question

我正在为限制列表的 DOM 数量的 LitElement 无限滚动条创建 POC。该组件基于以下组件:https://medium.com/walmartglobaltech/infinite-scrolling-the-right-way-11b098a08815

我的 POC 在这里:https://stackblitz.com/edit/lit-element-infinite-scroller-poc

item定位是通过在触发IntersectionObserver时调整paddings和更新list item内容来实现的。

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

我猜这是一个时间问题，但我无法确定确切位置。

Answer 1

我不确定重新发明轮子并自己实现无限滚动是否是个好主意，但对于您的代码，问题似乎出在 _getNewTopItemIndex 方法中，特别是当 isScrollDown 是错误的，您似乎在那里有错字，因为该部分与您在问题中提到的中等帖子不同。

_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;
}