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

Question

I have an html document called home.html. And I want a new html document to be loaded when the viewer scrolls down or the scroller reaches the bottom.

However, all the tutorials I have seen have seemed too advanced for me. I am a student and new to javascript.

So, is there anyone willing to walk me through how to create an ultra simple infinite scrolling webpage with just html and javascript if possible. I do not know php.

Thanks for any help you are willing to offer.

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.

<div style="height:125%">
<h1>Chapter 1</h1>
</div>
<script>
var page=1;
window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
           ifrm = document.createElement("IFRAME"); 
        ifrm.setAttribute("src", page+".html"); 
        ifrm.style.width = 100+"%"; 
        ifrm.style.height = 800+"px"; 
        document.body.appendChild(ifrm); 
        page++
    }
};
</script>

Answer 2

There's probably various ways to achieve this - but below are some basic steps that should give you a general idea:

1. Open your home.html page in a browser. The page should contain some sort of list which can be pre-populated with data (an alphabetically sorted list of movies for example).

2. You begin scrolling down the page - attempting to see the last movie in the list.

3. As you get closer to the bottom - a script running in your page (home.html) will detect that you are nearing the bottom and will make an AJAX request to another page (URL) to retrieve the next set of movies.

4. Once the data has been retrieved, the script will format and append more items to the movie list - giving the viewer the effect of an infinite scroll.

Note: The above can be achieved with plain HTML and JavaScript and you do not need any server side code (PHP) or live hosting. Check out this very simple tutorial that will walk you through the basics with some code examples.