已填充的无限滚动 div

Question

我有一个大数据的div（很多子div），我想在这个div上实现无限滚动，我试过一些jquery 可在 Internet 上获得的脚本，例如：

JScroll

MetaFizzy Infinite Scroll

还有很多我可以在 google 上找到的。

大多数脚本会ajax调用以获取数据（但我已经有了数据）

我能够使用下一个和上一个功能实现自定义分页如本例中所用 Custom Pagination with Next and Prev Button

但是我想实现无限滚动

这是 div 示例

<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 用于测试：Fiddle For Test

Answer 1

<!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>

我尝试了现有的插件，并根据您在浏览器中的requirement.Run进行了修改，希望这能解决您的问题。

Answer 2

使用 window 滚动和 window 高度偏移对我有用

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

已填充的无限滚动 div

Infinite scroll on already populated div

html

javascript

jquery

pagination

infinite-scroll