-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
QVirtualScroll remains in placeholder mode until scroll halts during momentum scroll #14773
Comments
Hi @aaliddell! 👋 It looks like you provided an invalid or unsupported reproduction URL. Without a proper reproduction, your issue will have to get closed. Thank you for your collaboration. 👏 |
I have copied your QVirtualScroll demo verbatim to a jsfiddle, it shows the problem just fine either there or on your docs site as originally linked |
I would love to see these sorts of improvements too. I've had loads of complaints from users that the parts of the app using QVirtualScroll are "slow" or "laggy". I was convinced I had some sort of performance issue and spent ages trying different things to speed things up, then suddenly realised it was all loading in as soon as I stopped the inertia scrolling myself! This would be a huge improvement as at the moment it makes my app look unresponsive. |
@aaliddell Thanks for the pointer to Vue-virtual-scroll! It was fairly trivial to swap out with QVirtualScroll and it makes a huge difference. Obviously I'd rather avoid additional libraries, but I think I'm going to go with that until QVS can implement the same sort of approach. |
What happened?
This has been covered somewhat before, such as here, but the QVirtualScroll has a problem whereby the content will be stuck on the placeholder stripes while a scroll is in its momentum phase (between finger being lifted from screen and content stopping moving). This is particularly painful on mobile, where there may be no content rendered for multiple seconds as the target slows down. This seriously harms discoverability when using these elements, as a user has to keep manually stopping the scroll to view content in a reasonable time.
In the previous issue this was raised in linked above, this was claimed to be unsolvable due to scroll events not being fired during the momentum phase. However, other virtual scroll libraries do a far better job in this regard. For example, picking the first Vue virtual scroller from a Google search: try momentum scrolling here and see that content is rendered correctly during the momentum phase and the coordinates continue to update in the upper right.
The fix for this appears to be using a
requestAnimationFrame
callback to actively monitor the offset of the scroll target, rather than relying solely on scroll events. This allows you to respond to changes in the scroll position as fast as the browser allows and similarly continues to work during the scroll momentum phase where scroll events fail.Now, there is the obvious concern that polling the scroll target offset increases the CPU load, so you may wish to have some sort of adaptive polling whereby you only poll with
requestAnimationFrame
when a scroll event has recently been fired and then stop active polling when a certain condition is met: e.g. callback has seen same offset twice in a row or otherwise quantify the max time a momentum scroll lasts.What did you expect to happen?
Content continues to render during scroll momentum phase
Reproduction URL
https://jsfiddle.net/3vyzqe9t/
How to reproduce?
Go to https://quasar.dev/vue-components/virtual-scroll on a mobile device (or anything with momentum scrolling) and scroll the demos. The content will be placeholder stripes during the scroll momentum phase. When content stops moving, the render will finally show the correct data.
Flavour
UMD
Areas
Components (quasar)
Platforms/Browsers
Firefox, Chrome, Safari, iOS
Quasar info output
Quasar CLI is not installed. This is present in latest version though, as linked above
Relevant log output
Additional context
No response
The text was updated successfully, but these errors were encountered: