3 ms·

As noted by another comment here [0], when you use a virtual DOM/canvas based "infinite" data grid such as Glide Data Grid [1] or TanStack Virtual [2], you get

As noted by another comment here [0], when you use a virtual DOM/canvas based "infinite" data grid such as Glide Data Grid [1] or TanStack Virtual [2], you get the performance/usability of native scrollbars because under the hood, both of those libraries create scrollable DIVs with a very large height. ie, you're scrolling a big empty div, and a viewport into the "infinite" grid is actually drawn in the canvas. But this does fall apart for very very large grids, as you get close to the height limit described in this article. For a project that I'm working on, I ended up re-implementing scrollbars, but it's super janky - and even more so on mobile where you lose the "flick"/inertia/momentum touch gestures (or you have to re-implement them at your peril). Are there any good tricks/libraries to tackle this? Thanks! [0] https://news.ycombinator.com/item?id=44825028 https://news.ycombinator.com/item?id=44825028 [1] https://github.com/glideapps/glide-data-grid https://github.com/glideapps/glide-data-grid [2] https://tanstack.com/virtual/latest https://tanstack.com/virtual/latest

moritzwarhier 1y ago
Since it seems unlikely that a single scroll gesture passes the threshold, and also the scrollbar thumb probably is invisible (either intentionally or due to the extreme height): maybe an "infinite scroll" paginated stack of virtual lists would be enough? I mean a dumb "load more" implementation that swaps out the main container once you reach the end/start of each "item" (virtual lists themselves)? If that doesn't help, maybe check out this fun post (no native scrolling experience): https://everyuuid.com https://everyuuid.com https://eieio.games/blog/writing-down-every-uuid/ https://eieio.games/blog/writing-down-every-uuid/
- gregsadetsky 1y ago
  great point re: Nolen's site -- I've collab'ed with him on https://eieio.games/blog/talk-paper-scissors/ https://eieio.games/blog/talk-paper-scissors/, I should have remembered that! :-) it's not crazy to stack virtual lists... at that point, I might also just see that the user is near/at the end of the list, and just swap out the content completely and place them back at scrolling position y:0 or something for sure, I shouldn't make perfect the enemy of good here. thanks for the ideas!
  - moritzwarhier 1y ago
    Oh, I'm glad i wasn't talking past you :) that uuud site and the post about it was genius, and haha, I didn't check the RPS-via-phone number app yet. Sounds equally fun! Just like the uuid one, also seems very worth bookmarking for a fitting moment
idbehold 1y ago
>But this does fall apart for very very large grids, as you get close to the height limit described in this article. This was solved by a now unmaintained virtualization library that predates both of these libraries: https://github.com/bvaughn/react-virtualized https://github.com/bvaughn/react-virtualized The react-virtualized library works around this issue by scaling the the scroll position it sets for a row based on the ratio of "max CSS height allowed by browser" to "computed height of all rows" if the latter is greater than the former: https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/ScalingCellSizeAndPositionManager.js https://github.com/bvaughn/react-virtualized/blob/master/sou...

moritzwarhier 1y ago

Since it seems unlikely that a single scroll gesture passes the threshold, and also the scrollbar thumb probably is invisible (either intentionally or due to the extreme height): maybe an "infinite scroll" paginated stack of virtual lists would be enough? I mean a dumb "load more" implementation that swaps out the main container once you reach the end/start of each "item" (virtual lists themselves)? If that doesn't help, maybe check out this fun post (no native scrolling experience): https://everyuuid.com https://everyuuid.com https://eieio.games/blog/writing-down-every-uuid/ https://eieio.games/blog/writing-down-every-uuid/

gregsadetsky 1y ago
great point re: Nolen's site -- I've collab'ed with him on https://eieio.games/blog/talk-paper-scissors/ https://eieio.games/blog/talk-paper-scissors/, I should have remembered that! :-) it's not crazy to stack virtual lists... at that point, I might also just see that the user is near/at the end of the list, and just swap out the content completely and place them back at scrolling position y:0 or something for sure, I shouldn't make perfect the enemy of good here. thanks for the ideas!
- moritzwarhier 1y ago
  Oh, I'm glad i wasn't talking past you :) that uuud site and the post about it was genius, and haha, I didn't check the RPS-via-phone number app yet. Sounds equally fun! Just like the uuid one, also seems very worth bookmarking for a fitting moment

idbehold 1y ago

>But this does fall apart for very very large grids, as you get close to the height limit described in this article. This was solved by a now unmaintained virtualization library that predates both of these libraries: https://github.com/bvaughn/react-virtualized https://github.com/bvaughn/react-virtualized The react-virtualized library works around this issue by scaling the the scroll position it sets for a row based on the ratio of "max CSS height allowed by browser" to "computed height of all rows" if the latter is greater than the former: https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/ScalingCellSizeAndPositionManager.js https://github.com/bvaughn/react-virtualized/blob/master/sou...