Virtual Scrolling with animation and dynamic loading
I don't have the bandwidth to expend too much on this idea, so it's more of a thought experiment for later, unless someone in the ecosystem team has come up with an elegant, premade solution for this. I have a list of cards rendered in a wrapper, where I need to scroll horizontally on clicking a button. My current idea that's unoptimised but functional (probably) is to just have an overflow:hidden CSS, and control the current scrolling position of the wrapper manually, setting it to "n * the width of a card*.
The main issue with that is that will a grand total of 4700 cards over 70 wrappers with individual scroll control, this might be... A bit slow.
Is virtual scrolling a solved problem in Solid? Is there a currently updated plugin that does it well enough? If not, I'll reserve some personal time to possibly work on it outside of work development time, but I was wondering... ☺️
4 Replies
I had to implement virtual scrolling for the devtools, and I've rolled my own solution because it seems fun to try. (never done that before) And it was super easy to do.
You just need to know how many items there are, what's the current scrollTop position, height of elements, and container height. Then you can calculate start and end position and apply correct CSS to position it on the screen.
Dynamic loading would be just about appending new items to the input so it doesn't sound hard to add.
Animations is still something that I have to do myself, so can't say what's the experience exactly. Will be trying solid-transition-group and solid-flip for sure, hoping that they just click. If not, not sure, probably gonna have to do some digging and #diy it
For out of the box solutions people are usually suggesting tanstack-virtual. Haven't tried it, but they should have solutions for most usecases.
Here is my implementation:
- https://github.com/thetarnav/solid-devtools/blob/9ef714f8e97e313b7aaee762e74fc712b764725a/packages/frontend/src/modules/structure/Structure.tsx#L218
- https://github.com/thetarnav/solid-devtools/blob/main/packages/frontend/src/modules/structure/virtual.ts
Thank you! I'll take a look at that today ^_^
I suggest not using overflow: hidden, but overflow scroll with scroll snap.
You can then do some css shenanigangs to hide the scrollbar visually, but the setup will automatically work with horizontal mouse wheels, trackpads or touch screens.
That's a very constructive insight actually! I hadn't thought of that, thanks!