Implementing Infinite Scroll With React Js without any plugin

Implementing #Infinite #Scroll With #Reactjs without any plugin.

  • In web development infinite scrolling is a technique that helps loading more contents automatically as the user scrolls down to the bottom.
  • The infinite Scroll concept has definitely earned the user attraction but i won’t say it has replaced pagination.
  • Make sure the of the div is lesser than the total height of primary showing items else you won’t get the scroll bar.
  • You can set the height to 100% or use the window object instead of our iScroll div to make the scroll at window level.
  • And I have used the same function to add the event listener for scroll into our div iScroll.

JavaScript, Node.js, mongo, react, angular and many more

In web development infinite scrolling is a technique that helps loading more contents automatically as the user scrolls down to the bottom.

The infinite Scroll concept has definitely earned the user attraction but i won’t say it has replaced pagination. Both have their own-unique features and uses. Infinite scrolling is very efficient for social medias like facebook and twitter, where as pagination is great for search engines like google.

So now if you have decided to go with infinite scrolling, you can do it in two different ways.

This article is about the first way; i.e. developing infinite scroll without using any plugin or package using react js. The article will describe and as well as provide examples for your ease.

We can make infinite scroll work by listening the event. We can add an event listener to either the parent most or even to the object.

Take a look at the following code:

The code above has a simple tag; inside which we will bind the fetched items. This tag is surrounded by a on which we are going to attach an event listener to listen the event.

I hope you are aware of all the tags used here. Aren’t you? Well, some of you may not be familiar with ! So, is…

Implementing Infinite Scroll With React Js without any plugin