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.
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
try with
npm i lit-virtualizer
I think you need something else you can collaborate with the project (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>
`;
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加