Jsfiddle

Question

当我靠近页面底部时，我有一个加载新项目的功能。它工作得很好，唯一的问题是当新项目加载时，滚动位置会一直回到顶部，这非常凌乱而不是我想要的。这是功能：

function loader(url) {
    $.get(url, function(data) {
        $newPosts = $(data).filter(function(){
            return this.id === 'posts';
        }).children();
        $newPosts.hide();
            $wall.masonry('destroy');
            $('#posts').append($newPosts);
        $newPosts.each(function(){
            $(this).fadeIn('slow');
        });
            $wall.masonry({
                itemSelector: '.entry, .entry_photo',
                isAnimated : false
            });
    }).error(function(url) {
        alert('error');
    });
};

Jsfiddle

正如你所看到的，它会直接跳回到顶部，看起来像是锯齿状。我怎么能防止这种情况？为什么会这样？

Answer 1

在我看来，砌筑中对destroy的调用是此处问题的根源。

使用appended方法

$wall
  .append( $newPosts )
  .masonry( 'appended', $newPosts );
  .masonry( 'layout' );

Answer 2

用这个脚本替换你的滚动功能，看看。

DEMO http://jsfiddle.net/yeyene/ajjaz/7/

$(window).scroll(function(){  
    if ($('#posts').outerHeight() - $('body').scrollTop() - 420 <= 0) {
        loader(site);
        $('html, body').animate({ scrollTop: $(this).scrollTop() }, 'fast');
        page += 1;
    }    
});

滚动位置一直没有我告诉它

Jsfiddle

2 个答案: