CODEWITHSUNDEEP
javascriptjquery
gourav
gourav

Reputation: 1397

How to load the web page content based on user scrolling

How to load the content while user scroll the web page. How to implement this?

Upvotes: 27

Views: 67978

Answers (7)

Aleksey Karcev
Aleksey Karcev

Reputation: 21

//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){

    }
}
});

Upvotes: 0

John Chioma
John Chioma

Reputation: 71

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));
  }
});

Upvotes: 7

Lazik
Lazik

Reputation: 2520

You can use jscroll a jquery plugin

http://jscroll.com/

Upvotes: 2

patrox
patrox

Reputation: 408

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>

`

Upvotes: 15

terry
terry

Reputation: 301

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/

Upvotes: 0

Dutchie432
Dutchie432

Reputation: 29170

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.

Upvotes: 40

Matthew Cox
Matthew Cox

Reputation: 13682

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.

Upvotes: 7

Related Questions