[Bug Report][3.7.7] Scrolling Offset Issue in virtual-scroller

[onlyJinx]

Environment

Vuetify Version: 3.7.7
Vue Version: 3.5.13
Browsers: Chrome 133.0.0.0
OS: Windows 10

Steps to reproduce

When I dynamically update the data source, virtual scrolling experiences an offset at the end of the scroll. Please refer to the attached mp4. How should I fix this? Looking forward to your response. Thank you.

Expected Behavior

It should have a smooth animation transition.

Actual Behavior

have not animation transition.

Reproduction Link

https://play.vuetifyjs.com/#...

vuefity.mp4

[KaelWD]

You have set item-height="48" but the items are 97px tall. Setting item-height="97" or removing it and allowing the component to determine height automatically fixes the stutter.

[onlyJinx]

Hello @KaelWD

That's impressive! I followed your method and resolved the issue in the test code. However, when I applied it to a real-world scenario, it still didn't work as expected. The data source (datas) actually comes from a server, so it starts as an empty array. After making a request to the server, I update the datas. Here, I used the timeout function to simulate the server's response.

If I don't set the item-height attribute during this process, the webpage becomes very laggy and may even cause the browser to crash, so I had to set the item-height. However, does the item-height value have any fixed requirements? My expectation is that when the task is completed, both percentdone and eta would be hidden, meaning the item-height wouldn't be uniform (the item-height for items still downloading would be larger than for others).

If I set it to 125, the scrolling still lags (reverting to the original issue). Do you have any other suggestions to address this? Looking forward to your response.

https://play.vuetifyjs.com/#

[J-Sek]

Maybe limit displayed items to couple hundred? Unless your end-users are robots, they won't comprehend that amount of data. The only other option I see would be to redesign items, so they would not change height depending on their state.

[onlyJinx]

Maybe limit displayed items to couple hundred? Unless your end-users are robots, they won't comprehend that amount of data. The only other option I see would be to redesign items, so they would not change height depending on their state.

Thank you for your response. I will redesigning to ensure all items have a uniform height, which should resolve this issue.