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

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