[Do it yourself] Virtual Scroll
What is Virtual Scroll ?
Have your ever seen a dropdown that contains 100000+ options? I have. It turned out that the overlay show the options was stuck when i scroll in the overlay, Obviously, it's undurable.
So, how to handle this problem? Virtual Scroll may help.
Virtual Scroll is a tech that let browser always render specific number of items rather than all the 100000+ items. In detail, it figures out what content should be rendered and figure out the vretical offset position of it, so it can make you feel like all the items are rendered.
Virtual Scroll , Lazy Loading and Infinate Scroll
When i try to implement a demo based on Virtual Scroll at the begining, I was totally messed up with Lazy Loading and Infinate Scroll Although I did not realized tha time. These 3 concepts confused me a lot. so, What's the diffrence between them?
- For Lazy Loading: If you cannot get all the data from server through single request, you should use Lazy Loading, to fetch the date when user scroll to the related position.
- For Infinate Scroll: If you cannot get all the data from server through single request and you don't want to use a pagination, just use Infinate Scroll to load more content when user scroll to the bottom of page.
- For Virtual Scroll: You can get all the data through single request, but you don't want to render all of them at same time, Virtual Scroll will help.
Build my own Virtual Scroll
In this Part, I will implement 2 demo based on adam klein's post.
Basic Virtual Scroll Demo
we assumed that the height of each row is fixed.
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bGaNpJg" data-user="liuqiao" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/liuqiao/pen/bGaNpJg">
Basic Virtual Scroll</a> by liuqiao (<a href="https://codepen.io/liuqiao">@liuqiao</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
Advanced Virtual Scroll Demo
If the height of each row is dynamic, what should we do?
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="QWaKQJx" data-user="liuqiao" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/liuqiao/pen/QWaKQJx">
Untitled</a> by liuqiao (<a href="https://codepen.io/liuqiao">@liuqiao</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
