使用jQuery的静态页面无限滚动

Question

即使您从未使用symfony2，它也很简单易懂，但我已经编码了分页注释部分

它仅循环浏览100条评论，然后使用“下一步”按钮显示下一个评论页面。

{% for comment in pagination %} 
       <div class="comment-container">
           <div class="bubble">
               <div class="cmt-avatar"></div>
               {{ comment.text }}
           </div>
       </div>
{% endfor %}

这种方法是迄今为止可以正常使用。 但这使设计看起来很糟糕，特别是在页面右侧有一个巨大的滚动条。 什么我需要的是一个方法，使之“看”像注释的集装箱被装载在用户scrolls.It的显然只是一个静态页面，只需要看起来像它的无限滚动。

到目前为止，我已经尝试过：

我在此页面上找到了它，但是没有用，没有错误，但是什么也没做。

{% for comment in pagination %} 
   <div class="scrollable-data'">
     <div class="comment-container">
           <div class="bubble">
               <div class="cmt-avatar"></div>
               {{ comment.text }}
           </div>
       </div>
   </div>
{% endfor %}

...脚本

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

// hide everything that is out of bound
$('.scrollable-data').filter(function(index){
    return ($(this).scrollTop() > $doc.height());
}).hide();

var DATA_INCREMENT=5;

$(window).scroll(function(){
    // test if at the bottom
    if ($doc.height()-$win.height()-$(this).scrollTop() == 0) {
        // show the <DATA_INCREMENT> (5) next hidden data tags
        $('.scrollable-data:hidden:lt('+DATA_INCREMENT+')').show();
    }
});

Answer 1

您的例程是复杂的脚本。

这就是我要实现的方式：

仅显示“在当前滚动条内”包含的Elmenet的例程（对不起，没有更好的用词）：

function rescroll(){
          //show all
     $('.scrollable-data').show();
        // hide everything that is out of bound
     $('.scrollable-data').filter(function(index){
         console.log($(this).position().top, $(window).height()+$(window).scrollTop());
         return ($(this).position().top > $(window).height()+$(window).scrollTop());
     }).hide();
}

然后，每当用户执行滚动时都调用此例程：

$(window).scroll(function(){
  rescroll();
});

然后在页面加载时也调用rescroll() 。

工作示例： http : //jsfiddle.net/5WtTU/

一些注意事项：

通常，无限滚动的工作原理是，当用户滚动到特定评论时，如果他/她向后滚动，这些评论不会再次隐藏！

因此，您应该将用户滚动条的最大值保存在某处，并始终隐藏直到这一点为止。 这样，如果用户向上滚动，您将不会隐藏任何东西。