Infinite scrolling with native JavaScript using the Fetch API

by Janeth Kent Date: 15-05-2023 javascript

I have long wanted to talk about how infinite scroll functionality can be implemented in a list of items that might be on any Web page.

Infinite scroll is a technique that allows the user to interact with the mouse by scrolling down to load new dynamic content.

In this way, the scroll becomes infinite and the initial load time improves considerably.

Not going too far, for example, an Ecommerce platform has to display products by categories if or if not. Normally, they usually work with pagination either with PHP or JavaScript.

Have you ever wondered what it would be like to paginate products with infinite scroll?

The infinite scroll is also used by platforms such as Facebook, Twitter or Tik Tok to display news or publications as you scroll with the mouse.

Social networks are an ideal scenario, at least they have accustomed us to that but, perhaps if there was a pagination on these websites with so much content that requires user clicks to display more information, it is more likely that they end up getting tired and do not browse as much.

One-page websites are becoming more and more trendy and it is no coincidence.

Don't you get the feeling that infinite scroll improves navigation?

Infinite scroll can be an excellent resource to show your content but you must use it correctly.

Before you decide lightly that you want to use infinite scroll, you must take into account its advantages and disadvantages.

 

Advantages of infinite scroll

 

It makes the users to be pending and this increases the navigation time.

  • Increases session time.
  • It has been studied that users reach elements that they would never reach with pagination.
  • Perfect for touch screens.
  • Ideal for mobile devices.
  • Ideal for visual content.
  • It is more attractive and modern.
 

Disadvantages of infinite scroll

 
  • Problems with the footer that is practically not shown until the end of the content.
  • Non-existent content organization.
  • Finding a specific element is difficult. For example, in classic pagination it is possible to access a page to access an element.
  • Time problems with loading large images in each iteration.
  • In this article you will learn how to implement an infinite scroll system in your web page using just JavaScript and asynchronous calls to the server.
 

HTML code

 

In the template or HTML file I am just going to add an empty list of elements:

 
<ul class="items row"></ul>
 

For the visual part, I will rely on Bootstrap 4 design.

So I am declaring an unordered list <ul> with the .row class to define a row.

The items class I will use to access the list via JavaScript.

JavaScript code

Pay attention to this section because the key to the matter is to understand the JavaScript code which is ultimately the conduit that queries the data from the server to display them on the screen.

 
var start = 0;
  var limit = 12;
  var endItems = false;
  
  window.addEventListener('scroll', () => {
if (window.scrollY == document.documentElement.scrollHeight - window.innerHeight) {
getItems();
}
});

window.onload = function() {
getItems();
}

function getItems() {
if (endItems) {
return;
} 

let params = new FormData();
params.append('start', start);
params.append('limit', limit);

fetch('ajax.php', {
method: 'post',
body: params,
}).then(function(response) {
if (response.ok) {
return response.json();
} else {
throw 'Server call error';
}
}).then(function(items) {
if (items.endItems) {
endItems = true;
} else {
var html = '';
items.forEach(function(element) {
html += `
<li class="col-lg-3">
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">${element.name}</h5>
<p class="card-text">${element.description}</p>
<p class="card-text">Qty: ${element.quantity}</p>
<p class="card-text">Price: ${element.price} €</p>
<p class="card-text">Total: ${element.price * element.quantity} €</p>
<a href="#" class="btn btn-primary">Buy now</a>
</div>
</div>
</li>
`;
});

const current_items = document.querySelector(".items");
current_items.innerHTML += html;
start += limit;
}
}).catch(function(error) {
console.log(error);
});
}
 

In this code I am defining 3 global variables:

start: to define the start of the SQL query boundary in the database. Initially, we start it at 0 to get the first records. This variable will change its value as we scroll with the mouse.

limit: it is used to define the number of elements per page. In this case we want it to be 12 to show 3 rows in 4 columns.

endItems: it is a boolean variable that I use to identify when we are at the end of the list of elements. Initially, it starts with false.

Next, we capture the scroll event to check when we have reached the bottom with the following code snippet:

 
window.addEventListener('scroll', () => {
if (window.scrollY == document.documentElement.scrollHeight - window.innerHeight) {
getItems();
}
})
 

The function getItems() is the one that will be in charge of fetching the information from the server to return the items that touch.

Logically, as we have defined our empty list in the HTML, when loading the page we will also call our getItems() function:

 
window.onload = function() {
getItems();
}

In the function getItems() the first thing we do is to check if we have reached the end of the list. If so, we stop the execution.

 
if (endItems) {      
    return;  
}
 

Otherwise, we prepare the parameters we want to send to the server with:

let params = new FormData();  
params.append('start', start);  
params.append('limit', limit);

To make the call to the server I use fetch as follows:

 
fetch('ajax.php', {
method: 'post',
body: params,
}).then(function(response) {
if (response.ok) {
return response.json();
} else {
throw 'Server call error';
}
}).then(function(items) {
if (items.endItems) {
endItems = true;
} else {
var html = '';
items.forEach(function(element) {
html += `
<li class="col-lg-3">
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">${element.name}</h5>
<p class="card-text">${element.description}</p>
<p class="card-text">Qty: ${element.quantity}</p>
<p class="card-text">Price: ${element.price} €</p>
<p class="card-text">Total: ${element.price * element.quantity} €</p>
<a href="#" class="btn btn-primary">Buy now</a>
</div>
</div>
</li>
`;
});

const current_items = document.querySelector(".items");
current_items.innerHTML += html;
start += limit;
}
}).catch(function(error) {
console.log(error);
});
 

The JavaScript fetch function provides an interface to access and manipulate parts of the HTTP channel through requests and responses. Something very similar to Ajax or XMLHttpRequest but in a modern version.

In this case we pass a "post" method and a body with the parameters that we want to transfer to the server.

Once the data is sent, we then capture the response from the server.

If the response is correct, we return the response with json.

Otherwise, we would show the user a server error.

We use then again to receive the data from the server, in this case, the new items or the indicated boolean variable.

If we have not reached the end, we show the items arriving from the server.

 

PHP code

 

In the ajax.php file being invoked in the fetch we have the following:

 
try {
$connexion = new PDO(
"mysql:host=your-website.com;dbname=databasename",
"user",
"password",
array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8")
);

} catch (PDOException $e){
echo $e->getMessage();
}

$start = $_POST['start'];
$limit = $_POST['limit'];

try {
$statement = $connexion->prepare(
'SELECT *
FROM products 
ORDER BY products_id DESC 
LIMIT '.(int)$start.','.(int)$limit
);

$statement->setFetchMode(PDO::FETCH_ASSOC);
$statement->execute();

$items = $statement->fetchAll();

if (is_array($items) && count($items) > 0) {
die(json_encode($items));
} else {
die(json_encode(array('reachedMax' => true)));
}
} catch (PDOException $e){
die(json_encode(array('error' => $e->getMessage())));
}
 

We make an attempt to connect to the database with PDO where basededatos must be the name of your database, user must be the user name of the database and password must be the password to access the database.

If it succeeds in connecting to the database, we receive the parameters start and limit to try to execute the query based on these parameters.

If the query returns information, we return to the JavaScript the array of elements to be displayed.

If the query returns the endItems variable true, the execution is finished and now the getItems() function will not execute the asynchronous call.

 

Conclusion

The infinite scroll can be a very good resource for your website if used in the right way.

For some projects it is indispensable or required but for others it can be optional.

Based only on its advantages and disadvantages I think it is worth implementing it.

What do you think?

 
by Janeth Kent Date: 15-05-2023 javascript hits : 13729  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Related Posts

How to upload files to the server using JavaScript

In this tutorial we are going to see how you can upload files to a server using Node.js using JavaScript, which is very common. For example, you might want to…

How to combine multiple objects in JavaScript

In JavaScript you can merge multiple objects in a variety of ways. The most commonly used methods are the spread operator ... and the Object.assign() function.   How to copy objects with…

The Payment Request API: Revolutionizing Online Payments (Part 2)

In the first part of this series, we explored the fundamentals of the Payment Request API and how it simplifies the payment experience. Now, let's delve deeper into advanced features…

The Payment Request API: Revolutionizing Online Payments (Part 1)

The Payment Request API has emerged as the new standard for online payments, transforming the way transactions are conducted on the internet. In this two-part series, we will delve into…

Let's create a Color Picker from scratch with HTML5 Canvas, Javascript and CSS3

HTML5 Canvas is a technology that allows developers to generate real-time graphics and animations using JavaScript. It provides a blank canvas on which graphical elements, such as lines, shapes, images…

How do you stop JavaScript execution for a while: sleep()

A sleep()function is a function that allows you to stop the execution of code for a certain amount of time. Using a function similar to this can be interesting for…

Mastering array sorting in JavaScript: a guide to the sort() function

In this article, I will explain the usage and potential of the sort() function in JavaScript.   What does the sort() function do?   The sort() function allows you to sort the elements of…

Sorting elements with SortableJS and storing them in localStorage

SortableJS is a JavaScript extension that you will be able to use in your developments to offer your users the possibility to drag and drop elements in order to change…

What is a JWT token and how does it work?

JWT tokens are a standard used to create application access tokens, enabling user authentication in web applications. Specifically, it follows the RFC 7519 standard. What is a JWT token A JWT token…

Template Literals in JavaScript

Template literals, also known as template literals, appeared in JavaScript in its ES6 version, providing a new method of declaring strings using inverted quotes, offering several new and improved possibilities. About…

How to use the endsWith method in JavaScript

In this short tutorial, we are going to see what the endsWith method, introduced in JavaScript ES6, is and how it is used with strings in JavaScript. The endsWith method is…

What are javascript symbols and how can they help you?

Symbols are a new primitive value introduced by ES6. Their purpose is to provide us unique identifiers. In this article, we tell you how they work, in which way they…

Clicky