Updating web page content when continuous scrolling

Question

I want to ask how do i implement something like Facebook or Quora such that i keep scrolling the page and content gets updated automatically without having to refresh

Usually by making an AJAX callback to the server for more content after a certain element on the page comes into view and then rendering that content to the page above the element and resetting the check. — Justin Pearce, Aug 20 '18 at 19:38

score 0 · Answer 1 · answered Aug 20 '18 at 19:46

The best way going about this is simply checking when you reach the bottom of the page check this answer. You might want to put an offset on that so that the new content loads before the bottom is reached.

Once the trigger is reached, you make an AJAX call (this depends on what framework/vanillaJS you're using), then just get new content and append it to the bottom of the page. Hope this helps!

score 0 · Accepted Answer · answered Aug 20 '18 at 19:49

You can perform an AJAX call to update the content of the page when the user has scrolled to the bottom of the page.

window.addEventListener("scroll", function(e){
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
        //bottom of the page reached
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
         document.getElementById("content").innerHTML += this.responseText;
        }
      };
      xhttp.open("GET", "someurl", true);
      xhttp.send();
    }
});

Updating web page content when continuous scrolling

2 Answers2