無限滾動已填充的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

回答

相關問題