How you can Implement Infinite Scrolling With JavaScript

What’s Infinite Scrolling?

Infinite scrolling is a characteristic used to dynamically load extra content material on a web page as soon as a consumer scrolls to the top of the web page.

The idea of infinite scrolling is used to load information from a server in a manner that feels “seamless” to a consumer however doesn’t overload the server by requesting an excessive amount of information directly.

In a earlier tutorial, we applied a pagination characteristic which allowed us break up our content material into navigable sections generally known as pages. This tutorial will use an analogous implementation.

Advantages of Vanilla JavaScript

A major advantage of utilizing JavaScript is that our implementation is framework-agnostic i.e. it’s not depending on any framework so it may be modded to work throughout all of them.

Additionally, since we’re constructing the characteristic ourselves and never relying on a plugin, we are able to be certain that the implementation is light-weight and completely suited to our wants.

Right here’s a take a look at the ultimate product, scroll to the underside of the pen to load extra content material:

1. Markup with HTML

We’ll begin by inserting the container for our playing cards on the web page. We’ll be including the playing cards to the container utilizing JavaScript so the div shall be empty.

<div id="card-container"></div>

We even have a loader div for displaying an animation earlier than including the subsequent batch of playing cards, and a card-actions div for displaying the cardboard depend and card whole.

<div id="loader">
  <div class="skeleton-card"></div>
  <div class="skeleton-card"></div>
  <div class="skeleton-card"></div>
</div>
<div class="card-actions">
  <span>Displaying 
    <span id="card-count"></span> of 
    <span id="card-total"></span> playing cards      
  </span>
</div>

2. Styling with CSS

The playing cards we’ll be including to the card-container div could have a classname of ‘card’. 

#card-container {
  show: flex;
  flex-wrap: wrap;
}

.card {
  top: 55vh;
  width: calc((100% / 3) - 16px);
  margin: 8px;
  border-radius: 3px;
  transition: all 200ms ease-in-out;
  show: flex;
  align-items: middle;
  justify-content: middle;
}

.card:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.card-actions {
  margin: 8px;
  padding: 16px 0;
  show: flex;
  justify-content: space-between;
  align-items: middle;
}

We’ll additionally create a loading animation for the skeleton playing cards within the loader div by animating the ::after pseudo-selector:

#loader {
  show: flex;
}

.skeleton-card {
  top: 55vh;
  width: calc((100% / 3) - 16px);
  margin: 8px;
  border-radius: 3px;
  transition: all 200ms ease-in-out;
  place: relative;
  background-color: #eaeaea;
}

.skeleton-card::after {
  content material: "";
  place: absolute;
  high: 0;
  proper: 0;
  backside: 0;
  left: 0;
  remodel: translateX(-100%);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
  animation: load 1s infinite;
}

@keyframes load {
  100% {
    remodel: translateX(100%);
  }
}

Accessible Styling

Each time we’re together with an animation on a webpage, it’s necessary to contemplate the accessibility implications. Some customers might desire to don’t have any animation in any respect and we are able to take that choice into consideration in our styling through the use of the media rule, prefers-reduced-motion

@media display and (prefers-reduced-motion: scale back) {
  .skeleton-card::after {
    animation: none;
  }
}

3. Performance With JavaScript

Let’s break down the logic behind infinite scrolling.

1. Outline the restrict of the content material to be loaded on the web page.
2. Detect when the consumer has reached the top of the content material container.
3. Load extra content material as soon as the top of the container has been reached.
4. If there’s no extra content material to be loaded, cease the infinite scroll.

Defining Constants

First, let’s get all the weather we’ll want from our DOM:

const cardContainer = doc.getElementById("card-container");
const cardCountElem = doc.getElementById("card-count");
const cardTotalElem = doc.getElementById("card-total");
const loader = doc.getElementById("loader");

Now we have to outline our international variables.

We’ll want a worth for the max variety of playing cards to be added to the web page. For those who’re getting your information from a server, this worth is the size of the response from the server. Let’s initialise a card restrict of 99. 

const cardLimit = 99;

The cardTotalElem is the aspect for displaying the max variety of playing cards on the web page so we are able to set the innerHTML to the cardLimit worth;

cardTotalElem.innerHTML = cardLimit;

Then we’ll outline a variable for what number of playing cards we need to enhance the web page by:

const cardIncrease = 9;

We’ll need to know what number of “pages” we’ll have i.e. what number of occasions can we enhance the content material until we attain the max restrict. For instance, with our outlined cardLimit and cardIncrease variables, we are able to enhance the content material 10 occasions (assuming we’ve already loaded the primary 9 components) till we attain the restrict. We’ll do that by dividing the cardLimit by the cardIncrease.

const pageCount = Math.ceil(cardLimit / cardIncrease);

Then we’ll outline a worth to find out which web page we’re on:

let currentPage = 1;

Making a New Card

Now we now have all our constants, let’s make a operate so as to add a brand new card to the cardboard container. We’ll set the innerHTML of our playing cards to the index worth so we are able to preserve monitor of the variety of playing cards we’re including.

A enjoyable characteristic on this demo is that every card has a randomly generated background coloration.

const getRandomColor = () => {
  const h = Math.ground(Math.random() * 360);

  return `hsl(${h}deg, 90%, 85%)`;
};

const createCard = (index) => {
  const card = doc.createElement("div");
  card.className = "card";
  card.innerHTML = index;
  card.fashion.backgroundColor = getRandomColor();
  cardContainer.appendChild(card);
};

Including Playing cards to the Container

Now we’ll add our playing cards to our container utilizing comparable performance to the Pagination tutorial.

First, decide the vary of playing cards to be added to the web page. The addCards operate will settle for a pageIndex parameter, which is able to replace the worldwide currentPage worth. If we’re on web page 1, we’ll add playing cards 1 to 9. If we’re on web page 2, we’ll add playing cards 10 to 18 and so forth.

We will outline that mathematically as:

const addCards = (pageIndex) => {
  currentPage = pageIndex;
  
  const startRange = (pageIndex - 1) * cardIncrease;
  const endRange = pageIndex * cardIncrease;
  
  for (let i = startRange + 1; i <= currRange; i++) {
    createCard(i);
  }
};

On this operate, our begin vary will all the time be one lower than the worth we’re making an attempt to get (i.e. on web page 1, the beginning vary is 0, on web page 2, the beginning vary is 9) so we’ll account for that by setting the worth of our for loop index to startRange + 1.

Detecting When Card Restrict is Reached

A restrict we’ll need to look out for is the endRange quantity. If we’re on the final web page, we’ll need our finish vary to be the identical because the cardLimit. As an example, if we now have a cardLimit of 75 and a cardIncrease of 10 and we’re on web page 8, our beginning index shall be 70 and our endRange worth must be 75. 

We’ll modify our addCards operate to account for this:

const addCards = (pageIndex) => {
  currentPage = pageIndex;

  const startRange = (pageIndex - 1) * cardIncrease;
  const endRange = currentPage == pageCount ? cardLimit : pageIndex * cardIncrease;

  for (let i = startRange + 1; i <= endRange; i++) {
    createCard(i);
  }
};

Our demo additionally features a cardTotal aspect that shows the variety of playing cards at the moment being proven on the web page so we’ll set the innerHTML of this aspect as the top vary.

const addCards = (pageIndex) => {
  currentPage = pageIndex;

  const startRange = (pageIndex - 1) * cardIncrease;
  const endRange = currentPage == pageCount ? cardLimit : pageIndex * cardIncrease;
  
  cardCountElem.innerHTML = endRange;

  for (let i = startRange + 1; i <= endRange; i++) {
    createCard(i);
  }
};

Loading Preliminary Playing cards

We’ve outlined a characteristic for including playing cards to the container so we’ll embody a window.onload operate to set the preliminary playing cards to be added to the web page.

window.onload = operate () {
  addCards(currentPage);
};

Dealing with Infinite Scroll

We’ll deal with our infinite scroll by growing the currentPage quantity so as to add new playing cards to the container after we’ve reached the top of the web page. We will detect when the top of the web page is reached by including the innerHeight of the window to the scroll worth pageYOffset and evaluating it to the doc offsetHeight which is the overall top of the web page.

Right here’s a visible illustration of what this appears to be like like:

As soon as we’ve reached the top of the web page, we need to load a brand new web page by calling our addCards operate with currentPage + 1.

const handleInfiniteScroll = () => {
  const endOfPage = window.innerHeight + window.pageYOffset >= doc.physique.offsetHeight;

  if (endOfPage) {
    addCards(currentPage + 1);
  }
};

Then we create an occasion listener for the window scroll and cross our above operate into it:

window.addEventListener("scroll", handleInfiniteScroll);

Efficiency Optimisation

Since we’re working with the scroll occasion listener, it’s useful to the efficiency of our webpage to restrict the variety of calls made. We will decelerate the variety of calls utilizing a throttle operate.

We’ll outline our throttle operate this manner:

var throttleTimer;

const throttle = (callback, time) => {
  if (throttleTimer) return;

  throttleTimer = true;

  setTimeout(() => {
    callback();
    throttleTimer = false;
  }, time);
};

after which we cross the throttle operate into the handleInfiniteScroll operate

const handleInfiniteScroll = () => {
  throttle(() => {
    const endOfPage =
      window.innerHeight + window.pageYOffset >= doc.physique.offsetHeight;

    if (endOfPage) {
      addCards(currentPage + 1);
    }
  }, 1000);
};

Stopping Infinite Scroll

At this level, we’ve arrange our capabilities so as to add extra content material as soon as the top of the web page is reached. Now, let’s be certain that our operate stops operating when there’s no extra content material to be added i.e. when the cardLimit is reached. 

First, let’s outline our removeInfiniteScroll operate. On this operate, we’ll take away the handleInfiniteScroll operate from the scroll occasion listener and likewise delete the loader div.

const removeInfiniteScroll = () => {
  loader.take away();
  window.removeEventListener("scroll", handleInfiniteScroll);
};

Now we’ll modify our handleInfiniteScroll to account for if there’s no extra content material to be added i.e. we’re on the final web page of content material.

const handleInfiniteScroll = () => {
  throttle(() => {
    const endOfPage =
      window.innerHeight + window.pageYOffset >= doc.physique.offsetHeight;

    if (endOfPage) {
      addCards(currentPage + 1);
    }

    if (currentPage === pageCount) {
      removeInfiniteScroll();
    }
  }, 1000);
};

Conclusion

And there we now have it! We’ve constructed a performant and accessible implementation of the infinite scroll characteristic. Take a look at the whole JavaScript code by hitting the JS tab on the embedded demo beneath: