3

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.

dork
  • 4,396
  • 2
  • 28
  • 56

3 Answers3

2

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;
}
Dipen Shah
  • 25,562
  • 1
  • 32
  • 58
  • Thanks for that catch! Hmm, actually, I tried scrolling really slow and it happened again, it wasn't updating the items. – dork Oct 23 '20 at 11:05
1

Seems like there's a small amount of discrepancy created when the element scroll and the body scroll are note matched, which comes from the margin on the body in your example, <style>body{margin:0}</style> seemed to clean that up and in conjunction with Dipen's typo catch, it seems like you're well on your way to a solid solution here.

https://stackblitz.com/edit/lit-element-infinite-scroller-poc-fccmn1?file=index.html

Westbrook
  • 608
  • 5
  • 9
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>
        `;
    }
HerberthObregon
  • 1,811
  • 19
  • 23