Search⌘ K
Home
Courses
Intermediate JavaScript: Building Frontend Components

Autopopulation

Explore how to build an infinite scroll list that dynamically loads content as users scroll near the page bottom. Learn to handle event listeners, state management to prevent duplicate requests, and strategies to avoid server overload.

We'll cover the following...

Scroll action listener #

​Let’s add an event listener to the scroll action, and when it reaches near the bottom of the page (say, 100px above), we’ll use that as a trigger to load. Here’s where the states will be used. If the state is in pending, we know not to trigger another request.

Javascript (babel-node)
function onScroll(event) {
  const scrolledTo = window.innerHeight + window.pageYOffset;
  const scrollLimit = document.body.offsetHeight;
  const scrollThreshold = 30;
​
  if (scrollLimit - scrolledTo <= scrollThreshold) {
    // TODO update
  }
}
​
window.addEventListener('scroll', onScroll);

We can’t ...