LitElement infinite scroll reposition issue

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.

from LitElement infinite scroll reposition issue