Infinite Scroll’ing the right way

Scroll — The basic:

Scrolling is an implementation of data display whenever we cannot fit everything onto a single page. Most websites are generally implemented this way due to the inability to fit all the content on the computer screen (Twitter, Facebook feed… etc).

The problem:

To simply implement this, we can always put all the data on the screen. The problem arises however when the number of items becomes large. Again, we can look at this Twitter feed below.

When we encounter a large list like this, displaying all possible items on the screen is not at all feasible since the number can be hundreds, thousands… or more and making that many DOM nodes to display data is simply not an optimal solution.

The Solution:

One of the solutions for this is using Pagination.

We organize our documents by pages. Each page will hold a certain number of items and display them as the user decides to navigate forward and back, using either page number or the arrow icon, just as flipping through the pages in a manual.