在Ajax中使用Infinite Scroll jQuery插件

Question

我正在做一个类似于Google Reader的项目。

我正在使用Infinite Scroll jQuery插件，该插件的功能与查看默认选定类别（在可滚动div中）的内容完全相同。

但是，当选择另一个类别（或Google Reader的文件夹）并将该类别的内容与ajax一起加载到与上述相同的div容器中（基本上完全类似于Google Reader）并向下滚动到第2页时，就会出现问题将会移动到以前选择+1的任何页面，而不是选择新类别时从头开始。

我认为基本上我需要一种在选择新类别时重置插件的方法。 任何帮助非常感谢。

Answer 1

我意识到这是一个非常普遍的问题。 我希望找到一个做过类似事情的人。

无论如何，这可能不是最佳选择，但我这样解决了。

我将此功能添加到了可以从插件外部调用的插件中：

this.resetPlugin = function() {
  $(document).unbind('retrieve.infscr',kickOffAjax);
  props.currPage = 1;
};

我这样加载插件

window.infinitescroll = $('#content').infinitescroll({usual settings});

比选择其他类别时，我可以重设它：

window.infinitescroll.resetPlugin();

Answer 2

您的回答对我没有用。 这是我做的：

您必须设置两个变量才能使InfiniteScroll生效。 您还必须重新绑定它。 这是代码：

$('#myContainer').infinitescroll('destroy'); // Destroy

// Undestroy
$('#myContainer').infinitescroll({                      
    state: {                                              
        isDestroyed: false,
        isDone: false                           
}
});

InitInfiniteScroll(); // This is a wrapper for the standard initialization you need

// Re-initialize
$('#myContainer').infinitescroll('bind');

Answer 3

仅这对我有效，可能此解决方案已过时：

jQuery无限滚动“重置”

Answer 4

如果有人遇到类似的问题，只想用我的答案做出贡献。

var off = 0;
var infinite = {};


function loadMorePosts(cat, offset){
            //FUNKY AJAX LOAD
}


function initInfinite(){
    infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0],
      onBeforePageLoad: function() {
        console.log(off);
        var cat = $('.f-categories').val();
        loadMorePosts(cat, off);
        off += 5;
      },
      onAfterPageLoad: function(){
        //console.log($.noop);
      }
    });
}
initInfinite();

$(function() {
    $('.f-categories').change(function(){
        var cat = $(this).val();
        off = 0;
        infinite.destroy();
        $('.grid').html('');
        initInfinite();
        loadMorePosts(cat,off);
    });
});