In Part 1 we learned the basic principals behind building a virtual scroll mechanism, the math behind it, and saw some psuedo-code and some real co...
For further actions, you may consider blocking this person and/or reporting abuse
Hi Adam, I got to ask some more about performance optimisations. I have also tried to build virtual scroll with feature of two-way infinite scroll. But I got to admit that the solution I built wasn't much performant. Now, related to my project, I got two major questions:
Hi,
Can you share a link to your code and I'll see if I can take a look?
I cannot share as I have done this in my current organisation
Hai, I need to perform virtual scroll in JavaScript can you provide me the code for it
how would you handle window resize in this? all the heights become stale as the window is resized, only a few items are on the DOM and only their modified heights can be obtained, you have to shift everything up or down
I guess if the container's dimensions change (for any reason) we need to recalculate from scratch.
But 'scrollTop' should remain the same, so probably no need to shift anything, just display more or less nodes depending on the new height.
i am talking about width change on resize, the displacement of each row from the top would totally get disturbed if the width were to change on resize, how do you think that should be handled? :) thank you for the response
Why should the width affect the calculations? I'm not following
you record heights of 50 rows, you change the width to compress the rows, depending on contents, some of the rows increase in their height, your stored heights are now invalid
I think this kind of situation is problematic for a virtual scroll of this sort, since the heights are returned per row, and usually not calculated based on measuring DOM nodes' dimensions.
So I would limit the "shrink factor" of the tree view and prevent the rows from wrapping and increasing in height.
Hey, thanks for this post. It's been extremely helpful in the last couple days.
I noticed you specify X items, but can scroll down only to X-1.
E.g. itemCount: 100, displayed items: 0-98
I'm trying to fix it right now, but would appreciate your help :D
Thanks!
The calculation for the end node was wrong, because it relied on the start node AFTER I reduced the renderAhead.
Also, visible count should be endNode - startNode + 1 (because if we're displaying nodes 1 to 10, we need 10 nodes, not 9).
Fixed in the example
I fixed like this:
But I'm not sure any side-effect would show up or not in a real world scenario.
Thoughts?
Curious question based on your react example, why have you written const totalHeight =
childPositions[itemCount - 1] + getChildHeight(itemCount - 1) + 35; what is this 35? average row height of an item since it starts at 30 and goes till 39?
Oh, thanks for noticing!
Probably leftover - I removed it
Thank you so much!!!
react-window and other solutions do not support native html tables (returns DIVs not TRs) so I had to try and solved it with no lib.
added minor cases support to your example like:
forked your code with the aforementioned cases: bit.ly/38nATie
native virtual table implementation using your code in: bit.ly/36dc4nu
Cool! Thanks for the addition.
I wonder if you could make it work with position: sticky
Hello, Thank you for your detailed series! I've translated your code to Vue for anybody struggling with React.
gist.github.com/derpdead/f35a2ec17...
Could you give as a hint about best practise of making row measurer for auto height content?
Thanks!
I've never done that, but sounds like a nice challenge :)
@adamklein The git repo mentioned in the article for the tree implementation doesn't seem to be available. Do you have a different link to access it?
I am currently working on a similar requirement in lightning web component (salesforce), so was hoping to find any documentation/ directions related to it.
Thanks!!
Could anyone kindly add a Vue.js version of this?
Great idea! If anyone adds one I'll add to the post
Hi Adam, how would you handle lazy load items on scroll, and jump to a specific index/row?
You know what would be awesome for part 3? How to make it circular. Like scrolling to the very bottom would make start from the beginning but on a infinite scroll like fashion.
Hello Adam, first of all, amazing work here you've done. I want the lib to use window scroll as in the window scrollbar should be used to scroll. How would I do that? Thanks.
Hello Adam, i really enjoy read this tutorial
How to you think of two direction virtual scroll? (horizontal and vertical)
I think that could be a great Part III :)