How virtual / infinite scrolling works

Barna Toth
Jun 2, 2017 · 3 min read
Image for post
Image for post

You may ask why should I ever read about how virtual scrolling is done and You’re partly right. There are numerous libraries that solve the problem for us but still there are times when those solutions are simply not enough so it’s worth knowing how they work.

The problem

So what is this fuss about virtualizing scrolling in browsers?

The main problem is that altering anything in the DOM is excruciatingly slow compared to other operations you can do in the browser.

You may ask why? Because whenever we add/remove/update something in the DOM the browser will have to recalculate the layout, re render etc. So all in all it’s just slow.

Even worse a huge DOM means even more data that the browser will have to calculate with.

Image for post
Image for post

Okay so the DOM can be slow. When does it really affects us?

For example when we’re trying to show long lists to the website’s user. Showing a long list not only means many elements in the DOM but as it possibly requires scrolling it will cause layout calculation and rendering quite often.

To summarize: Showing long scrollable lists with many items on a website will kill the user experience.

The solution

So how can we avoid adding too many elements to the DOM?

  • As a user can only see a limited amount of rows in a list why not just add those elements visible to the user to the DOM. We usually call a frame where visible content can be found a ViewPort.
Image for post
Image for post

So that’s how infinite / virtual scrolling works.

You can check our this angular2-cool-infinite-grid an infinitely scrolling grid I wrote for angular.

See the cool interactive DEMO here.

Hope you find this package useful.

Thanks for reading.

Frontend journeys

Journeys in Frontend development

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store