How to load div on scroll

Question

How to load div and it's child elements when scroll event occurred with jquery?

For example, i just want to load this div and content inside this div only when user scroll

<div id="loadonscroll">
  //some images and scripts inside this div need to be load on scroll

</div>

This question already has good tutorials/answers available, while posting a question you should also tell us what you tried and where you got stuck. Here's a working fiddle (not mine, plenty of examples out there). http://jsfiddle.net/brynner/QDttv/ — ksankar, Feb 21 '20 at 06:36
Does this answer your question? [jQuery load more data on scroll](https://stackoverflow.com/questions/14035180/jquery-load-more-data-on-scroll) — ksankar, Feb 21 '20 at 06:38

score 3 · Answer 1 · answered Feb 21 '20 at 06:29

this works for me. When you scroll data will append on DIV TAG. and it should be displayed after Scrolling.

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
           // ajax call and append data on DIV 
           $("#loadonscroll").html(ajaxData);
    }
});

score 2 · Answer 2 · answered Feb 21 '20 at 07:24

//Scroll to buttom


$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
        var data = html code
 $("#loadonscroll").html(data);
   }
});

// near bottom!

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       var data = html code
 $("#loadonscroll").html(data);
   }
});

How to load div on scroll

2 Answers2