• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

How to Add Infinite Scrolling to a HTML Element With Vanilla JavaScript

Javascript · October 6, 2021

There is a Javascript library for almost anything. But sometimes, it’s good to code your solutions to specific problems where the resulting code will be lighter, and you will feel more rewarded as a result.

When it comes to infinite scrolling in Javascript, many examples, you will find online relate to scrolling the main window (which is a common thing). But what if you have an overflowing DIV that you want to add infinite scrolling on? The logic is the same.

We determine the maximum scroll height by subtracting the clientHeight from the elements scrollHeight. We then obtain the current scrollTop value (distance scrolled from top of the container). Finally, we add the scroll distance and our buffer and determine if it equals the maximum scroll (end of the container) or exceeds it.

const wrapper = document.querySelector('#items');
let scheduledAnimationFrame = false;
let bufferValue = 80;

function checkScrollPosition() {
    const maxScroll = wrapper.scrollHeight - wrapper.clientHeight;
    const currentScrollValue = wrapper.scrollTop;
    const isElementScrolledToTheBottom = (currentScrollValue + bufferValue) >= maxScroll);

    if (isElementScrolledToTheBottom) {
     // Call our data loading function in here
    }
}

function onScroll() {
    if (scheduledAnimationFrame) {
        return;
    }
  
    scheduledAnimationFrame = true;
  
    requestAnimationFrame(() => {
        checkScrollPosition();
        scheduledAnimationFrame = false;
    });
}

wrapper.addEventListener('scroll', onScroll);

Inside of checkScrollPosition is where you would call any code, such as making requests to a server to load some data. It is also worth noting that you might not even need to use requestAnimationFrame I am using it because of a force of habit, but these days you can implement scrolling solutions like this without using it.

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • How To Get The Hash of A File In Node.js
  • Testing Event Listeners In Jest (Without Using A Library)
  • Which Neural DSP Archetype Plugins Should You Buy?
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • How to Fast Launch Microsoft Flight Simulator 2020 (decrease game loading time)
  • Wild Natural Deodorant Review
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • Perfectly Smoked Steak On A Charcoal BBQ Using Indirect Heat

Recent Comments

  • Thebe on How to Remove the My Sites Menu From the WordPress Admin Bar
  • Maccas worker jn the 2000s on Dear McDonald’s: bring back the Warm Cookie Sundae, you cowards
  • Anamika Singh on Testing Event Listeners In Jest (Without Using A Library)
  • Stefan on A List of WordPress Gutenberg Core Blocks
  • pandammonium on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz