Infinite scrolling with AJax calls

A working example for an infinite scrolling page with a Jquery Ajax request.

Upon reaching the bottom of the page the Ajax call function is used to retrieve random words to append and populate the page.

A working example at CodePen.

HTML

This is the basic HTML which uses Bootstrap, the only real important part is the class="list". This is what the cards get appended to.

<div class="container" style="margin-top: 1rem;">
    <div class="jumbotron text-center py-3">
        <h1>Infinite scroll Ajax call example</h1>
        <p class="lead">Stay on the one page with infinite scrolling and fetching with Ajax.</p>
        <p>Keep on scrolling...</p>
    </div>
    <div class="list text-center">

    </div>
</div>

JS + Ajax

The Javascript is an adaptation from here however added in is the callData() function which adds in a random word to each card from Ajax request to the random-word API.

var currentscrollHeight = 0;
var count = 0;

jQuery(document).ready(function ($) {
    for (var i = 0; i < 8; i++) {
        callData(count);//Call 8 times on page load
        count++;
    }
});

$(window).on("scroll", function () {
    const scrollHeight = $(document).height();
    const scrollPos = Math.floor($(window).height() + $(window).scrollTop());
    const isBottom = scrollHeight - 100 < scrollPos;

    if (isBottom && currentscrollHeight < scrollHeight) {
        //alert('calling...');
        for (var i = 0; i < 6; i++) {
            callData(count);//Once at bottom of page -> call 6 times
            count++;
        }
        currentscrollHeight = scrollHeight;
    }
});


function callData(counter) {
    $.ajax({
        type: "GET",
        url: "https://random-word.ryanrk.com/api/en/word/random",
        dataType: "json",
        success: function (result) {
            //alert(result[0]);
            $('<div class="card my-4 py-3"><h4 class="card-title">' + result[0] + '</h4><p>' + counter + '</p></div>').appendTo('.list');
        },
        error: function (result) {
            //alert("error");
            $('<div class="card my-4 py-3"><h4 class="card-title">API call failed</h4><p>' + counter + '</p></div>').appendTo('.list');
        }
    });
}

Upon page load the API is called 8 times to populate the page and give the opportunity to scroll down (so the example works..). Once at the bottom the API is called 6 times and thus the cycle continues.

Each card is counted and the number displayed below the word as to help understand the infinite scrolling state.

This example uses the random word API Ajax request as a simple way to showcase the infinite scrolling with dynamic data, similar can be achieved using database calls (Ajax/PHP/Node Js).

Result