title: Infinite scroll on already populated div
body: <p>I have a div with large data (many sub-div),I want to implement a infinite scroll on this div, I tried with some jquery scripts which is available on internet for example :</p>
  
  <p><a href="http://jscroll.com/" rel="nofollow noreferrer">JScroll</a> </p>
  
  <p><a href="https://github.com/metafizzy/infinite-scroll" rel="nofollow noreferrer">MetaFizzy Infinite Scroll</a></p>
  
  <p>and many more which i could find on google.</p>
  
  <p>Most of the scripts do ajax call to fetch data (but i already have data with me)</p>
  
  <p>I am able to implement Custom Pagination with next and previous functionality 
  as used in this example
  <a href="https://stackoverflow.com/questions/31920360/dynamic-pagination-in-jquery">Custom Pagination with Next and Prev Button</a></p>
  
  <p>But i want to implement a infinite scroll</p>
  
  <p>Here's is div example </p>
  
  <pre><code>&lt;div class="InfiniteScroll"&gt;
    &lt;div class="line-content"&gt;1 I have some content&lt;/div&gt;  
    &lt;div class="line-content"&gt;2 I have some content&lt;/div&gt;
    &lt;div class="line-content"&gt;3 I have some content&lt;/div&gt;
    &lt;div class="line-content"&gt;4 I have some content&lt;/div&gt;
    &lt;div class="line-content"&gt;5 I have some content&lt;/div&gt;
    &lt;div class="line-content"&gt;6 I have some content&lt;/div&gt;
    &lt;div class="line-content"&gt;7 I have some content&lt;/div&gt;
    &lt;div class="line-content"&gt;8 I have some content&lt;/div&gt;
    &lt;div class="line-content"&gt;9 I have some content&lt;/div&gt;
    &lt;div class="line-content"&gt;10 I have some content&lt;/div&gt;
    &lt;div class="line-content"&gt;11 I have some content&lt;/div&gt;
    ..
    ..
    ..
    ..
    ..
    ..
    ..
    &lt;div&gt;AND MANY MORE&lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>Fiddle For Testing :   <a href="https://codepen.io/vicmathur/pen/vZzgWK" rel="nofollow noreferrer">Fiddle For Test</a></p>