How to load the web page content based on user scrolling

How to load the content while user s开发者_如何学JAVAcroll the web page. How to implement this?

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.

Just to expand on Dutchie432. In my experience the

if ($(window).scrollTop() == $(document).height() - $(window).height())

may not be true consistently( personally i couldnt make it true cause it was jumping numbers ).
Also, if the user scrolls up and down it could fire many requests , while we are waiting for the first ajax call to return.

So what i did to make it work, was to use >= instead of == . Then, unbinding the scrollTop before making my ajax request. Then binding it again if the ajax has returned any data (which means there may be more).

Here it is

<script type="text/javascript">
  $(document).ready(function(){                
        $(window).bind('scroll',fetchMore);
   });

   fetchMore = function (){
       if ( $(window).scrollTop() >= $(document).height()-$(window).height()-300 ){
           $(window).unbind('scroll',fetchMore);
            $.post('ajax/ajax_manager.php',{'action':'moreReviews','start':$('.review').length,'step':5 },
            function(data) {
               if(data.length>10){
                    $(data).insertBefore($('#moreHolder'));
                    $(window).bind('scroll',fetchMore);
               }
            });
        }
   }
</script>

`

You are referring to Dynamic Progressive Loading.

Is a pretty well documented concept and there is even some built-in support for it from different libraries. JQuery actually has a GridView that supports progressive loading pretty easily for example.

You will need to utilize AJAX to implement this feature.

You can use window.addeventlistener to track the scrolling behavior the webpage and load more content to the page when the user is at the foot of the webpage.

document.documentElement.scrollTop, document.documentElement.clientHeight and document.documentElement.scrollHeight will help you achieve this goal.

for example:

window.addEventListener('scroll',()=>{
  const {scrollTop,clientHeight,scrollHeight} = document.documentElement;
  if ((scrollTop+clientHeight)>=scrollHeight) {
    getContent((current_page+1));
  }
});

You can use jscroll a jquery plugin

http://jscroll.com/

You can use some library like jQuery to retrieve the content , then append it to the page content, Or you can use some jquery plugin like this: http://gbin1.com/technology/jquerynews/20111017jquerypluginwaypoints/infinite-scroll/

//Vanilla JS
let isLoaded = false;
window.onscroll = function () {
scrollFunction();
};
function scrollFunction() {
if (
document.body.scrollTop > 350 ||
document.documentElement.scrollTop > 350
) {
if (!isLoaded) {

}
} else {

}
}

//jQuery
var isLoaded = false;
$(window).scroll(function() {
var height = $(window).scrollTop();
if(height  > 350) {
    if(!isLoaded){

    }
}
});