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定位是通过调整paddings，在触发IntersectionObserver时更新list item内容来实现的。

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

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

Answer 1

我不确定重新发明轮子并自己实现无限滚动是否是个好主意，但对于您的代码，问题似乎出在 _getNewTopItemIndex 方法中，特别是当 isScrollDown 是false 你似乎在那里打错了，因为那部分与你在问题中提到的媒介 post 不一样。

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

Answer 2

当元素滚动和主体滚动音符匹配时，似乎存在少量差异，这来自您示例中主体的边距，<style>body{margin:0}</style> 似乎已将其清理干净并在结合 Dipen 的打字错误，您似乎正在寻找可靠的解决方案。

https://stackblitz.com/edit/lit-element-infinite-scroller-poc-fccmn1?file=index.html

Answer 3

正如 Dipen 所说，我觉得 _getNewTopItemIndex 可以优化，但实际上如果您看到 lit-visualizer 执行此实现非常费力。

建议大家不要重新发明轮子，可以用lit-virtualizer

https://www.npmjs.com/package/lit-virtualizer

试试

npm i lit-virtualizer

我认为您还需要其他可以与项目协作的东西 (https://github.com/polymerlabs/uni-virtualizer)

示例：

render() {
        return html`
            <lit-virtualizer
              .scrollTarget=${window}
              .items=${this.data}
              .renderItem=${(contact) => html`
                <div><b>${contact.name}</b>: ${contact.phone}</div>
              `}>
            </lit-virtualizer>
        `;
    }

LitElement 无限滚动重定位问题

LitElement infinite scroll reposition issue

javascript

infinite-scroll

intersection-observer

lit-element

示例：