DEV Community

Cover image for Build your Own Virtual Scroll - Part I

Build your Own Virtual Scroll - Part I

adam klein on August 05, 2019

This is a 2 part series: Part I - Concept and Math part II - Dynamic Height and Performance Part I Building your own virtual scrolli...
Collapse
 
bellindj profile image
Dan Bellinski • Edited

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!

Collapse
 
olegchursin profile image
Oleg Chursin

Can you share the resulting component, please, Dan? Would love to take a look.

Collapse
 
slidenerd profile image
slidenerd

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

Collapse
 
zr87 profile image
Zoltan Rakottyai • Edited

It was enlightening! Thanks for sharing!
Attempted to recreate the first part in a barebone Angular example

Collapse
 
adamklein profile image
adam klein

Thanks!
The Stackblitz example doesn't load for me

Collapse
 
alireza30sharp profile image
alireza30sharp

Thanks!
The Stackblitz example doesn't load for me

Collapse
 
alexus85 profile image
Alex Petrik

not loading at all

Collapse
 
tryhardest profile image
tryhardest

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.

Collapse
 
hassam7 profile image
Hassam Ali

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?

Collapse
 
adamklein profile image
adam klein

We add padding above and below the visible viewport, hence we double the nodePadding number - 2 * nodePadding

Collapse
 
bumhyun profile image
bum-hyun

Thanks!
Can I translate this article into Korean?

Collapse
 
adamklein profile image
adam klein

Sure!
Please link back to the original post and send me the link as well so I include it in the original post