LitElement infinite scroll reposition issue

Question

I'm creating a POC for a LitElement infinite scroller that limits the DOM count of the list. The component is based on this one: https://medium.com/walmartglobaltech/infinite-scrolling-the-right-way-11b098a08815

My POC is here: https://stackblitz.com/edit/lit-element-infinite-scroller-poc

The item positioning is achieved by adjusting the paddings and updating the list item content when the IntersectionObserver is triggered.

When the component is scrolled really fast from top to bottom, it works fine. When you slow down the scroll, it sometimes adds a padding before reaching the threshold of the IntersectionObserver. As for scrolling from bottom to top, it always behaves like that regardless of whether you scroll fast or slowly.

I'm guessing it's a timing issue but I can't pinpoint where exactly.

Answer 1

I am not sure if it is a good idea to reinvent the wheel and implement infinite scroll by yourself, but for your code the issue seems to be in _getNewTopItemIndex method specifically when isScrollDown is false you seems to be having typo there as that part is not same as medium post you mentioned in your question.

_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

As Dipen says, I feel like _getNewTopItemIndex can be optimized but really if you see lit-visualizer it's quite laborious to do this implementation.

I recommend you not to reinvent the wheel, you can use lit-virtualizer

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

try with

npm i lit-virtualizer

I think you need something else you can collaborate with the project (https://github.com/polymerlabs/uni-virtualizer)

Example:

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