无限滚动已填充的div

我有一个大数据div（许多sub-div），我想在这个div上实现无限滚动，我尝试了一些jquery脚本，这些脚本可以在互联网上使用，例如：无限滚动已填充的div

等等，我能找到的谷歌。

大多数脚本做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 For Test

来源

2017-07-07 Vaibhav

为什么你不能使用.InfiniteScroll {溢出-Y：滚动;} –

我试过也加入小提琴 – Vaibhav

好的，即使没有数据，你仍然要求滚动吗？ –

使用窗口滚动和窗口高度偏移为我工作

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

来源

2017-07-07 10:46:18 Vaibhav

<!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> 
 
\t \t \t \t \t <p class="line-content">1 I have some content</p> 
 
\t \t \t \t \t  <p class="line-content">1 I have some content</p> 
 
\t \t \t \t \t \t  <p class="line-content">1 I have some content</p> 
 
\t \t \t \t \t \t \t  <p class="line-content">1 I have some content</p> 
 
\t \t \t \t \t \t \t \t <p class="line-content">1 I have some content</p> 
 
\t \t \t \t \t \t \t \t  <p class="line-content">1 I have some content</p> 
 
\t \t \t \t \t \t \t \t \t  <p class="line-content">1 I have some content</p> 
 
\t \t \t \t \t \t \t \t \t \t <p class="line-content">1 I have some content</p> 
 
\t \t \t \t \t \t \t \t \t \t <p class="line-content">1 I have some content</p> 
 
\t \t \t \t \t \t \t \t \t \t  <p class="line-content">1 I have some content</p> 
 
\t \t \t \t \t \t \t \t \t \t \t <p class="line-content">1 I have some content</p> 
 
\t \t \t \t \t \t \t \t \t \t \t <p class="line-content">1 I have some content</p> 
 
\t \t \t \t \t \t \t \t \t \t \t <p class="line-content">1 I have some content</p> 
 
\t \t \t \t \t \t \t \t \t \t \t <p class="line-content">1 I have some content</p> 
 
\t \t \t \t \t \t \t \t \t \t \t <p class="line-content">1 I have some content</p> 
 

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

 
     </div> 
 

 
    
 

 
</body> 
 
</html>

我想现有的插件和修改根据您的requirement.Run它在浏览器中，希望这个解决您的问题。

来源

2017-07-07 07:42:32

无限滚动已填充的div

回答

相关问题