Infinite scroll on already populated div

Question

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 :

JScroll

MetaFizzy Infinite Scroll

and many more which i could find on google.

Most of the scripts do ajax call to fetch data (but i already have data with me)

I am able to implement Custom Pagination with next and previous functionality as used in this example Custom Pagination with Next and Prev Button

But i want to implement a infinite scroll

Here's is div example

<div class="InfiniteScroll">
  <div class="line-content">1 I have some content</div>  
  <div class="line-content">2 I have some content</div>
  <div class="line-content">3 I have some content</div>
  <div class="line-content">4 I have some content</div>
  <div class="line-content">5 I have some content</div>
  <div class="line-content">6 I have some content</div>
  <div class="line-content">7 I have some content</div>
  <div class="line-content">8 I have some content</div>
  <div class="line-content">9 I have some content</div>
  <div class="line-content">10 I have some content</div>
  <div class="line-content">11 I have some content</div>
  ..
  ..
  ..
  ..
  ..
  ..
  ..
  <div>AND MANY MORE</div> 
</div>

Fiddle For Testing : Fiddle For Test

Okay, you're asking to scroll even though if there is not data? — Hema Nandagopal, Jul 07 '17 at 07:16
nope, scroll after all the data is available and no fetch during scroll — Vaibhav, Jul 07 '17 at 07:17

score 1 · Accepted Answer · answered Jul 07 '17 at 10:46

Used window scroll and window height offset worked for me

Code snippet

var $doc=$(document);
var $win=$(window);
var itemstoshow=5;

$('.infinite').filter(function(index){
    return (($(this).offset().top) > $win.height());
}).hide();

$(window).scroll(function(){ 
    if ($doc.height()-$win.height()-$(this).scrollTop() == 0) {
        $('.infinite:hidden:lt('+itemstoshow+')').show();
    }
});

score 0 · Answer 2 · answered Jul 07 '17 at 07:42

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
body {
    margin: 0;
    font-family: 'Liberation Sans', Arial, sans-serif;
}

h1 {
    text-align: center;
}

#posts {
    margin: 0 auto;
    padding: 0;
    width: 700px;
    list-style-type: none;
}

article h1 {
    text-align: left;
    border-bottom: 1px dotted #E3E3E3;
}

article p {
    text-align: justify;
    line-height: 1.5;
    font-size: 1.1em;
}

#loading {
    display: none;
    text-align: center;
}
</style>
<script>

$(document).ready(function() {
    var win = $(window);

    // Each time the user scrolls
    win.scroll(function() {
        // End of the document reached?
        if ($(document).height() - win.height() == win.scrollTop()) {
            $('#loading').show();

            // Uncomment this AJAX call to test it
            /*
            $.ajax({
                url: 'get-post.php',
                dataType: 'html',
                success: function(html) {
                    $('#posts').append(html);
                    $('#loading').hide();
                }
            });
            */

            $('#posts').append(randomPost());
            $('#loading').hide();
        }
    });
});

// Generate a random post
function randomPost() {
    // Paragraphs that will appear in the post
    var paragraphs = [
        '<p> </p>'];

    // Shuffle the paragraphs
    for (var i = paragraphs.length - 1; !!i; --i) {
        var j = Math.floor(Math.random() * i);
        var p = paragraphs[i];
        paragraphs[i] = paragraphs[j];
        paragraphs[j] = p;
    }

    // Generate the post
    var post = '<li>';
    post += '<article>';
    post += '<header><h1>Datas</h1></header>';
    post += paragraphs.join('');
    post += '</article>';
    post += '</li>';

    return post;
}
</script>
</head>
<body>


        <div id="posts">
        
               

                    <p class="line-content">1 I have some content</p>
        <p class="line-content">1 I have some content</p>
           <p class="line-content">1 I have some content</p>
           <p class="line-content">1 I have some content</p>
           <p class="line-content">1 I have some content</p>
           <p class="line-content">1 I have some content</p>
              <p class="line-content">1 I have some content</p>
              <p class="line-content">1 I have some content</p>   
           <p class="line-content">1 I have some content</p>   
           <p class="line-content">1 I have some content</p>
              <p class="line-content">1 I have some content</p> 
           <p class="line-content">1 I have some content</p> 
           <p class="line-content">1 I have some content</p>  
           <p class="line-content">1 I have some content</p>  
           <p class="line-content">1 I have some content</p>   
           <p class="line-content">1 I have some content</p>  

           <p class="line-content">1 I have some content</p>  
           <p class="line-content">1 I have some content</p>  
           <p class="line-content">1 I have some content</p>  
           <p class="line-content">1 I have some content</p>  
           <p class="line-content">1 I have some content</p>  
           <p class="line-content">1 I have some content</p>

        </div>

    

</body>
</html>

I tried the existing plugin and modified according to your requirement.Run it in the browser,hope this solved your problem.

Infinite scroll on already populated div

2 Answers2