How do I do Infinite Scrolling with just html and javascript? [closed]

Answer 1

As a starting point only

Detecting when you are at the bottom of the page can be done with this code using jQuery.

$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height()-$(window).height()){
        alert("We're at the bottom of the page!!");
    }
});

Appending to the end of the body can be done with an ajax call

    $(window).scroll(function(){
        if ($(window).scrollTop() == $(document).height()-$(window).height()){
           $.ajax({
              url: "your.html",
              success: function (data) { $('body').append(data); },
              dataType: 'html'
           });
        }
    });

I'm not sure how you intend to get a limitless amount of data?

Part 2 from comments

Chrome doesn't allow local ajax requests without a change to google chrome itself.

The easiest web server to start on a local machine is php web service. Download PHP and create a shortcut to the php.exe with the target of the shortcut being

C:\PHP\php.exe -S Localhost:80 

The start in directory would be the location of the html. index.html or index.php need to be in the start in directory and http:// ... localhost will pull up index.php or index.html. I leave the start in blank and copy the shortcut into the folder I want to use as my localhost for my current dev work.

PHP can be downloaded from http://php.net/

The manual for the webserver is here http://www.php.net/manual/en/features.commandline.webserver.php

Without Ajax

Without infinite data (ajax to PHP calls) it is easier, and no need for jquery. iframes can be appended to the end of the page without needing a local server.

Chapter 1