Question

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

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

触发IntersectionObserver时，通过调整填充并更新列表项的内容来实现项的定位。

当组件从上到下真正快速滚动时，它可以正常工作。当您降低滚动速度时，有时会在达到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;
}

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无限滚动重新定位问题

3 个答案:

示例：