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.

Bautista

Also, can I check if the infinite scrolling is working without the site being live? – Bautista

Infinite scrolling is not a trivial undertaking, and typically needs a data feed from server side - that's kind of the point. If you're new to JavaScript, you may be best off starting with something else first – Inhume

Yeah, I figured as much, but infinite scrolling would work well for the project I am working on. And as far as needing server side data feed, is there a way to use my own computer as the server, just to get some functional infinite scroll working. – Bautista

Yes, but you'd still need a server side language and to set up a web server and that opens a number of entire new worlds... Perhaps if you elaborate on what you're trying to do, somebody may have an idea. – Inhume

Check out endless.horse – Allonym

Check out medium.com/@ashishshubham/… – Resoluble

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>

Shirleeshirleen

I think including how to install some web server is out of the scope of this question. – Therapeutics

Yes, but "is there a way to use my own computer as the server," was added in comments. – Shirleeshirleen

I don't need a truly "limitless" amount of data. I am just wanting to have a new page loaded and added to the end of the current page when the the scroller reaches the bottom, instead of having hyperlinks to navigate between pages. There is going to be about 5 pages to scroll down through. – Bautista

See Without Ajax its easier using iframes no local server required – Shirleeshirleen

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.

Mccants