Проблема с изменением положения бесконечной прокрутки LitElement

Я создаю POC для бесконечного скроллера LitElement, который ограничивает количество DOM в списке. Компонент основан на следующем: https://medium.com/walmartglobaltech/infinite-scrolling-the-right-way-11b098a08815

Мой POC находится здесь: https://stackblitz.com/edit/lit-element-infinite-scroller-poc

Позиционирование элемента достигается путем настройки отступов и обновления содержимого элемента списка при срабатывании IntersectionObserver.

Когда компонент прокручивается очень быстро сверху вниз, он работает нормально. Когда вы замедляете прокрутку, он иногда добавляет отступ до достижения порога IntersectionObserver. Что касается прокрутки снизу вверх, она всегда ведет себя так, независимо от того, быстро вы или медленно прокручиваете.

Я предполагаю, что это проблема времени, но я не могу точно определить, где именно.


javascript infinite-scroll intersection-observer lit-element
person dork    schedule 24.09.2020    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Как говорит Дипен, я чувствую, что _getNewTopItemIndex можно оптимизировать, но на самом деле, если вы видите lit-visualizer, это довольно трудоемко сделать эту реализацию.

Рекомендую не изобретать велосипед, можно использовать lit-virtualizer

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

попробуйте с

npm i lit-virtualizer

Я думаю, вам нужно что-то еще, с чем вы можете сотрудничать с проектом (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>
        `;
    }
person HerberthObregon    schedule 23.10.2020
comment
О, классно! Я такого раньше не видел. Спасибо! - person dork; 23.10.2020

arrow_upward
2
arrow_downward

Я не уверен, что изобретать колесо и реализовывать бесконечную прокрутку - это хорошая идея, но для вашего кода проблема, похоже, в методе _getNewTopItemIndex, особенно когда isScrollDown ложно, похоже, что у вас есть опечатка, поскольку эта часть не То же, что и средний пост, который вы упомянули в своем вопросе.

_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;
}
person Dipen Shah    schedule 17.10.2020
comment
Спасибо за этот улов! Хм, на самом деле, я пробовал прокручивать очень медленно, и это повторилось, элементы не обновлялись. - person dork; 23.10.2020

arrow_upward
1
arrow_downward

Похоже, возникает небольшое несоответствие, когда прокрутка элемента и прокрутка тела совпадают с нотами, что происходит из поля на теле в вашем примере, <style>body{margin:0}</style>, похоже, убрал это и в сочетании с уловкой опечатки Дипена, похоже, здесь вы на правильном пути к твердому решению.

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

person Westbrook    schedule 17.10.2020