LitElement 无限滚动重新定位问题答案

【问题标题】：LitElement infinite scroll reposition issueLitElement 无限滚动重新定位问题
【发布时间】：2020-09-24 06:34:16
【问题描述】：

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

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

在IntersectionObserver触发时，通过调整paddings和更新列表项内容来实现item定位。

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

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

【问题讨论】：

标签： javascript infinite-scroll lit-element intersection-observer

【解决方案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;
}

【讨论】：

感谢您的收获！嗯，实际上，我尝试滚动很慢，但又发生了，它没有更新项目。

【解决方案2】：

正如 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>
        `;
    }

【讨论】：

哦，太好了！我以前没见过这个。谢谢！

【解决方案3】：

似乎在元素滚动和正文滚动注释匹配时会产生少量差异，这来自您示例中正文的边距，<style>body{margin:0}</style> 似乎已将其清除并与 Dipen 的错字结合赶上，看来您在这里找到了可靠的解决方案。

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

【讨论】：