How to Make Content Load When the User Scrolls Down to It

How to load the web page content based on user scrolling

Generally speaking, you will need to have some sort of structure like this

....first page of content...
....first page of content...
....first page of content...
....first page of content...
....first page of content...
....first page of content...
....first page of content...
<div id="placeHolder"></div>

Then, you will need to detect when you are getting close to the end of the page, and fetch more data

 $(window).scroll(function(){
      if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           AddMoreContent();
      }
 });    

 function AddMoreContent(){
      $.post('getMoreContent.php', function(data) {
           //Assuming the returned data is pure HTML
           $(data).insertBefore($('#placeHolder'));
      });
 }

You may need to keep a javascript variable called something like lastId which stores the last displayed id and pass that to the AJAX receiver so it knows which new content to return. Then in your AJAX you could call

      $.post('getMoreContent.php', 'lastId=' + lastId, function(data) {
           //Assuming the returned data is pure HTML
           $(data).insertBefore($('#placeHolder'));
      });

I did exactly this on my company's search page.

Loading content as the user scrolls down

Unspace had an article demonstrating this functionality: Endless Pageless: No More Next Page. Their demonstration page is here (dead, for reference).

This particular example uses RoR and Prototype.

Load new content when user scrolls to the bottom using Dojo?

Unfortunately I can't comment on Niklas' answer, but his answer is correct. The one thing I would change is to issue a Dojo event in the case where you've scrolled to the bottom instead of calling a specific function.

var scrollingDetector = (function() {
    var max = calculateScrollHeight();

    return function(){
        if (max < window.pageYOffset) {   
            max = calculateScrollHeight();
            dojo.publish('/newsApp/onScrollBottom');
        }
    }
    function calculateScrollHeight(){
        return (document.documentElement.scrollHeight - document.documentElement.clientHeight) - 80; 
    }
})();   

setInterval(scrollingDetector, 500);    

(I also took the liberty of refactoring slightly in the interest of performance, as we only need to recalculate the height when we hit the bottom of the page).

This will allow you to hook into this event elsewhere in your code without having to edit this snippet or override the onMoreButtonClick() function.

jQuery load more data on scroll

In jQuery, check whether you have hit the bottom of page using scroll function. Once you hit that, make an ajax call (you can show a loading image here till ajax response) and get the next set of data, append it to the div. This function gets executed as you scroll down the page again.

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
           // ajax call get data from server and append to the div
    }
});

jQuery load content when scroll to bottom-100px of page, multiple events fired

I was having this same problem too. I came across this link and it really helped (and worked)!

Update: I looked at the code and I think that when you rebind, you are missing the function to rebind to.

jsFiddle

 function loadMore()
{
   console.log("More loaded");
    $("body").append("<div>");
   $(window).bind('scroll', bindScroll);
 }

 function bindScroll(){
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       loadMore();
   }
}

$(window).scroll(bindScroll);

How to load more search results when scrolling down the page in React.js?

This is called infinite scroll.
If you don't wanna build this from the scratch, you can use external libs:

https://www.npmjs.com/package/react-infinite-scroller

https://www.npmjs.com/package/react-infinite-scroll-component

If you wanna build it yourself, you can follow these tutorials:

https://alligator.io/react/react-infinite-scroll/

https://upmostly.com/tutorials/build-an-infinite-scroll-component-in-react-using-react-hooks

Starting a page at a certain scroll point

You can use standard javascript: window.scroll(x, y).

This should work pretty well considering that you'll be doing this at onload, i.e. the window should begin at (0, 0). Play around with (x, y) until you get your header to the position that you're happy with. Naturally you'll need to change it anytime the header moves.

Example:

<body onLoad="window.scroll(0, 150)">

---

Related Topics