This is a 2 part series:
Part I - Concept and Math
part II - Dynamic Height and Performance
Part I
Building your own virtual scrolli...
For further actions, you may consider blocking this person and/or reporting abuse
Thanks for a great explanation Adam! I used the technical explanation from the article to modify your ReactJS example to work for a StencilJS web component. It works great and surprisingly not a lot of code!
Can you share the resulting component, please, Dan? Would love to take a look.
I have added the Vue.js version codepen.io/zupkode/pen/oNgaqLv It needs a bit of refactoring but thanks to your post it works wonderfully
It was enlightening! Thanks for sharing!
Attempted to recreate the first part in a barebone Angular example
Thanks!
The Stackblitz example doesn't load for me
Thanks!
The Stackblitz example doesn't load for me
not loading at all
Great article. Can't wait to see Pt2 as well. Irregular dynamic row heights without media query obviously make it much more complex, especially when not knowing number and keeping high performance.
let visibleNodesCount = Math.ceil(viewportHeight / rowHeight) + 2 * nodePadding;
Thanks for the nice write up. There is one questions: whats the + 2 for in live above?
We add padding above and below the visible viewport, hence we double the nodePadding number - 2 * nodePadding
Thanks!
Can I translate this article into Korean?
Sure!
Please link back to the original post and send me the link as well so I include it in the original post