Custom-Infinite-Scroll

Enhance the performance of your JavaScript web app

What is Infinite Scroll?

It is a web design method that provides you with the ability to load content continuously on scrolling. And not to load all the relevant content that belongs to a page at once. It could be either direction; upwards or downwards. For instance, if you’re building a chatting web application then you’d probably like to load more content as you scroll up the page; to load more of the chat history. On the other hand, if you’re building a social media feed page, it will make more sense to load more content as you scroll down; as the new posts will be always on top and the user can scroll down to see older ones if he wants to.

Why do I need to use infinite scrolling technique?

If you add a lot of items at once (maybe they contain text, images, videos … etc.), then they will probably take a long time to be loaded and your website will freeze for a while. So you will either go with pagination or infinite scrolling techniques, based on the nature of your application. If it is a chat messaging app, you won’t need to make the user aware of requesting a different page. Based on user experience, he just wants to scroll up smoothly to view the previous messages in the chat.

Implementation

I ran into some challenges while implementing my infinite scroll. I want to share some of them with you and how I solved them. So, here are the key points I thought of before starting to implement the infinite scroll:

1- On first load, how many chunks I need to ask for? As I needed to get enough data to fill the screen so that the scroll appears.

2- When I will ask for the next chunk of items (page)? In a chat app, I will need to get the next chunk when I hit the scroll top. While in a feed page I will need to get the next chunk when I hit the bottom of the screen.

3- Which page number to ask for? So I need to keep track of the page number that I’ve reached.

But before getting into the coding details, let’s refresh some important definitions used in scrolling.

Element’s Scroll Height: It is the height of the element’s content (even the not shown part of the content in case of overflow)

Element’s Scroll Top: Its value is a measurement of the distance from the element’s top to its topmost visible content. When an element’s content does not generate a vertical scrollbar or when you reached the top of your page by scrolling up, then the element’s scrollTop value is 0.

Element’s Client Height: Its value is equal to the height of the visible content of the element in pixels.

Well, now we’re ready to go back to the implementation details.

So here is the condition that answers the question “On first load, how many chunks I need to ask for”:

Which means that as long as the element scroll height is less than the document body scroll height, I need to get more data to fill the page. In order for the scroll to appear so I am able to trigger the rest of the requests.

And here are the conditions that answer my second question “When I will ask for the next chunk of items (page)?”:

If true then you’ve reached the scroll Top (used in case of chat app)

Here is a trick, regarding how to detect that you’ve reached the bottom of your element. You’ll always find this equation when you search the internet:

This is the theoretical condition that detects that you’ve reached the scroll bottom (It works most of the time)

But unfortunately, that’s not always the case. When your screen is zoomed in or out there is a slight difference that makes the mentioned condition fails. So here is my magical condition that works perfectly even if the screen is zoomed in or out with any percentage.

When this condition is true it detects that you’ve reached the scroll bottom (It works all the time)

To sum up, now you can detect that you’ve reached either the top or the bottom of your page and consequently request another chunk of items as needed. And of course don’t forget to request the right amount of chunks on first load to fill the page in order for the content to overflow and generate a scroll.

Now, you have full control on your scroll and can even develop the idea and make a maximum limit to the number of chunks to load in a single page. And then remove items from the container element as you scroll towards the opposite direction.

If you find this article helpful then please 👏 so that others can read it as well.

References: some of the images and definitions are from Web API Docs