When you access an e-commerce website and navigate to the bottom of the page, it is noticeable that more items are fetched and shown. As you continue scrolling downward, further products are loaded and displayed, and this cycle continues until there are no additional items left to showcase. Typically, these online retail platforms present a restricted quantity of products through a backend API. This functionality is generally known as "Infinite Scrolling."
Infinite Scroll: What is it?
Commonly known as endless scrolling or infinite scrolling, this technique in web design and development eliminates the need for pagination by automatically fetching and adding new content to the bottom of a page as the user continues to scroll down. This method allows users to navigate through an unlimited amount of content without needing to manually flip through pages, thereby providing a seamless browsing experience.
The React infinite scroll component is commonly utilized by social networking platforms, e-commerce websites, and various other sites that require the frequent display of extensive content.
To mitigate significant performance issues, React's infinite scroll approach retrieves data solely when it is required and presents it in response to a continuous scroll event. Unlike traditional pagination, where a user must click on a page number to access the next set of data, the infinite scroll technique in React is typically far more efficient and user-friendly.
When the objective is to consistently load data that resides at the same hierarchical level, adopting the infinite scrolling technique is advisable. However, there are alternative methods we can consider. The infinite scrolling functionality can serve as a mild substitute for pagination. Nevertheless, it is not universally applicable to all websites. Typically, infinite scrolling may not be the best choice if users are looking to accomplish specific tasks with clear goals, particularly when they require quick and straightforward access to particular information without unnecessary effort.
Much like the infinite scroll methodology, React Infinite Scroll represents a web development strategy that automatically fetches and adds new content to a webpage as the user continues to scroll downward. This is particularly achieved through the use of the React JavaScript library.
React Infinite Scroll functions by monitoring when a specific element—typically a "load more" button or a designated div—enters the viewport, leveraging the Intersection Observer API. Each time this element becomes visible, a designated function is triggered to load additional data and append it to the end of the page. This mechanism creates an infinite scrolling experience for users, as the process is repeated each time they scroll down and new elements are subsequently loaded.
The React Infinite Scroll component is commonly utilized by extensive applications such as social networking sites, e-commerce platforms, and various other websites that present a substantial amount of content. This component allows developers to improve performance and provide users with a seamless browsing experience by loading the necessary information only when it is required.
It can also be developed as a third-party package that can be seamlessly integrated into React applications. Typically, these packages offer an API that enables developers to customize the functionality of infinite scrolling in React, such as specifying the number of items to load with each scroll event, managing loading errors, and other related behaviors.
How can we add an Infinite Scroll in React.js?
Numerous data records exist within any application, whether it is web-based, mobile, or desktop. Users typically seek to access this information in a centralized location for various reasons associated with products, items, travel, trains, residences, and many other subjects.
A substitute is necessary due to widespread performance concerns that hinder the ability to load all records simultaneously for this feature. One potential solution is to implement an infinite scroll. This method is widely utilized for data loading, triggered by the scroll event, and it continuously fetches data whenever the user reaches the end of the page. To incorporate infinite scrolling in a React application, there are two approaches to consider:
- Utilizing a third-party library
- Implementing a custom infinite scroll solution
In order to load data as a result of a scrolling action, we will create a straightforward, tailored endless scrolling mechanism in this section.
<!DOCTYPE html>
<html>
<head>
<style>
.scrollUp {
animation-name: scrollUp;
animation-name: scrollUp;
animation-duration: 1s;
animation-duration: 1s;
visibility: visible;
}
@keyframes scrollUp {
0% {
opacity: 0;
transform: translateY(80%);
}
100% {
opacity: 1;
transform: translateY(1%);
}
}
body {height:1500px;}
.col-1 {float:left}
.col-2 {float:left;padding-left:25px;}
img {width:180px;height:100px;visibility:hidden;}
hr {margin-top:400px;}
</style>
</head>
<body>
<h1>Example for infinite scroll Event</h1>
<p>Scroll down to see the picture.</p>
<p>When you scroll 200px from the top, an image will appear</p>
<hr>
<div class="col-1">
<img id="pic" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" width="200" height="200">
</div>
<div class="col-2">
Here is the picture
</div>
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.documentElement.scrollTop > 200) {
document.getElementById("pic").className = "scrollUp";
}
}
</script>
</body>
</html>
Output