在已填充的 div 上无限滚动答案

【问题标题】：Infinite scroll on already populated div在已填充的 div 上无限滚动
【发布时间】：2023-03-16 13:40:02
【问题描述】：

我有一个包含大数据（许多子 div）的 div，我想在这个 div 上实现无限滚动，我尝试了一些在互联网上可用的 jquery 脚本，例如：

JScroll

MetaFizzy Infinite Scroll

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

大多数脚本都会调用 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

【问题讨论】：

为什么不能用.InfiniteScroll{overflow-y:scroll;}
我也试过了，加了小提琴
好的，即使没有数据，您也要求滚动？
不，在所有数据可用后滚动，滚动期间不获取
好的，知道了：）会试试的。

标签： javascript jquery html pagination infinite-scroll

【解决方案1】：

使用过的窗口滚动和窗口高度偏移对我有用

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

【讨论】：

【解决方案2】：

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

我尝试了现有的插件并根据您的要求进行了修改。在浏览器中运行它，希望这可以解决您的问题。

【讨论】：