AI Features
Home
Courses
Intermediate JavaScript: Building Frontend Components

Autopopulation

In this lesson we learn how to dynamically load more tweets.

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.

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 quite yet do the update, since we don’t have the lastTweetId.

In the loop for ...

Ask