Scrolling to a far away element using scrollIntoView then nothing gets rendered

[MattiasJa]

Which package(s) are affected?

Virtualizer (@lit-labs/virtualizer)

Description

When scrolling to a far away element, for example using virtualizer.element(xyz).scrollIntoView then nothing gets rendered,

For example 30000 elements in the list and each element have height 37px. Scrolling to anything above 14984 not working.

(temp2 is the virtualizer ref in the browser console ) temp2.element(14984).scrollIntoView({block: 'center', behavior: 'instant',}) OK, list scrolls and gets rendered correct.

temp2.element(14985).scrollIntoView({block: 'center', behavior: 'instant',}) NOK, list is blanked no elements rendered. Any value >= 14985 At the same time as this problem theres also a printput : err ResizeObserver loop completed with undelivered notifications. in the console.log

Same problem with scrollToIndex.

Getting a ref to the scrollable element above and using: scrollabeRef.scrollTop = 37 * 14985 is working

lit-virtualizer is rendered in a lit component as :

            <lit-virtualizer
                .items=${this.options.option}
                .renderItem=${renderItem}
            ></lit-virtualizer>

The Scrollable element is outside the host component.

Reproduction

https://lit.dev/playground/#project=W3sibmFtZSI6InJlcHJvLnRzIiwiY29udGVudCI6ImltcG9ydCB7aHRtbCwgY3NzLCBMaXRFbGVtZW50fSBmcm9tICdsaXQnO1xuaW1wb3J0IHtjdXN0b21FbGVtZW50LCBwcm9wZXJ0eX0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuaW1wb3J0IHR5cGUgeyBMaXRWaXJ0dWFsaXplciB9IGZyb20gJ0BsaXQtbGFicy92aXJ0dWFsaXplcic7XG5pbXBvcnQgJ0BsaXQtbGFicy92aXJ0dWFsaXplcic7XG5cbkBjdXN0b21FbGVtZW50KCd4LXJlcHJvJylcbmV4cG9ydCBjbGFzcyBYUmVwcm8gZXh0ZW5kcyBMaXRFbGVtZW50IHtcbiAgc3RhdGljIHN0eWxlcyA9IGNzc2BkaXYgeyBoZWlnaHQ6IDM3cHg7Y29sb3I6IHllbGxvdzsgYm9yZGVyOiAxcHggc29saWQgeWVsbG93OyB3aWR0aDoxMDAlIH1gO1xuIFxuICBfb3B0aW9ucyA9IDMwMDAwO1xuICBfaXRlbXM7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcbiAgICB0aGlzLl9pdGVtcyA9IEFycmF5LmZyb20oeyBsZW5ndGg6IHRoaXMuX29wdGlvbnMgfSwgKF8sIGluZGV4KSA9PiAoe2xhYmVsOiAnT3B0aW9uICcraW5kZXgsfSkpO1xuICB9XG4gIFxuICByZW5kZXIoKSB7XG4gICAgY29uc3QgcmVuZGVySXRlbSA9IChvcHQpID0-IGh0bWxgPGRpdj4ke29wdC5sYWJlbH08L2Rpdj5gO1xuICAgIHJldHVybiBodG1sYFxuICAgICAgICAgICAgICAgIDxsaXQtdmlydHVhbGl6ZXJcbiAgICAgICAgICAgICAgICAgICAgLml0ZW1zPSR7dGhpcy5faXRlbXN9XG4gICAgICAgICAgICAgICAgICAgIC5yZW5kZXJJdGVtPSR7cmVuZGVySXRlbX1cbiAgICAgICAgICAgICAgICA-PC9saXQtdmlydHVhbGl6ZXI-XG4gICAgYDtcbiAgfVxufVxuIn0seyJuYW1lIjoiaW5kZXguaHRtbCIsImNvbnRlbnQiOiI8IURPQ1RZUEUgaHRtbD5cbjxoZWFkPlxuICA8c2NyaXB0IHR5cGU9XCJtb2R1bGVcIiBzcmM9XCIuL3JlcHJvLmpzXCI-PC9zY3JpcHQ-XG5cbjwvaGVhZD5cbjxib2R5PlxuPHNjcmlwdD5cbiAgZnVuY3Rpb24gX3Njcm9sbCh2KSB7XG4gICAgY29uc29sZS5sb2coXCJzY3JvbGwgdG8gXCIsIHYpO1xuICAgIHZhciB4ID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcigneC1yZXBybycpO1xuICAgIHZhciBsID0geC5zaGFkb3dSb290LnF1ZXJ5U2VsZWN0b3IoJ2xpdC12aXJ0dWFsaXplcicpO1xuICAgIGwuZWxlbWVudCh2KS5zY3JvbGxJbnRvVmlldyh7XG4gICAgICBibG9jazogJ2NlbnRlcicsXG4gICAgICBiZWhhdmlvcjogJ2luc3RhbnQnLFxuICAgIH0pO1xuICB9XG5cbjwvc2NyaXB0PlxuICA8YnV0dG9uIG9uY2xpY2s9XCJfc2Nyb2xsKDApXCI-c2Nyb2xsIHRvIDA8L2J1dHRvbj5cbiAgPGJ1dHRvbiBvbmNsaWNrPVwiX3Njcm9sbCgxMDAwMClcIj5zY3JvbGwgdG8gMTAwMDA8L2J1dHRvbj5cbiAgPGJ1dHRvbiBvbmNsaWNrPVwiX3Njcm9sbCgxNDk4NClcIj5zY3JvbGwgdG8gMTQ5ODQ8L2J1dHRvbj5cbiAgPGJ1dHRvbiBvbmNsaWNrPVwiX3Njcm9sbCgxNDk4NSlcIj5zY3JvbGwgdG8gMTQ5ODU8L2J1dHRvbj5cbiAgPGJ1dHRvbiBvbmNsaWNrPVwiX3Njcm9sbCgxNTAwMClcIj5zY3JvbGwgdG8gMTUwMDA8L2J1dHRvbj5cbiAgPGJ1dHRvbiBvbmNsaWNrPVwiX3Njcm9sbCgyMDAwMClcIj5zY3JvbGwgdG8gMjAwMDA8L2J1dHRvbj5cblxuICA8ZGl2IHN0eWxlPVwiYmFja2dyb3VuZDpncmVlbjtoZWlnaHQ6IDMwMHB4O292ZXJmbG93OmF1dG87XCI-XG4gIDx4LXJlcHJvPjwveC1yZXBybz5cbiAgPC9kaXY-XG48L2JvZHk-XG4ifSx7Im5hbWUiOiJwYWNrYWdlLmpzb24iLCJjb250ZW50Ijoie1xuICBcImRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJsaXRcIjogXCJeMi4wLjBcIixcbiAgICBcIkBsaXQvcmVhY3RpdmUtZWxlbWVudFwiOiBcIl4xLjAuMFwiLFxuICAgIFwibGl0LWVsZW1lbnRcIjogXCJeMy4wLjBcIixcbiAgICBcImxpdC1odG1sXCI6IFwiXjIuMC4wXCJcbiAgfVxufSIsImhpZGRlbiI6dHJ1ZX1d

Workaround

Using scrollTop on the scrollable (but is not nice because the scrollable is outside the component and we want to scroll from inside the component)

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

2.0.14

Browser/OS/Node environment

edge chrome

(Reproduction playground does not work at all on firefox when scroll to for example 1000, not sure if this is another issue or problem with repro!?)

[jpzwarte]

I have noticed this as well today.

[jpzwarte]

@graynorton I can confirm with this reproduction. I haven't looked too closely yet what is happening here. https://lit.dev/playground/#gist=d81c8e91715e5df7a2065e89c564d9d5

[graynorton]

Yes, this is another issue for which I have a fix that needs verification, cleanup and tests. Thanks for confirming!

[bartoloxs]

Hi @graynorton, we are working on a project and we are using this package. This solution is exactly what we need. Could we know when it will be available?

Thanks!