0

これがほぼ機能していると、最新の投稿が一度に 3 つ #posts div に読み込まれます。しかし、新しい投稿が読み込まれると、下にスクロールする方法がわかりません [すべて表示されるように]

// infinite scrolling on homepage
$('.load-more').click(function(e) {

    var $this = $(this);

    var offset = $this.data('offset') + 3;

    var myProperties = {
        snippet: 'infiniteScroll',
        limit: 3,
        offset: offset,
        parents: 22,
        depth: 999,
        sortby: 'publishedon',
        showHidden: 1,
        debug: 1,
        tpl: 'infiniteHomePageTpl'
        };

    $.ajax({
        type: "POST",
        url: "/ajax.processor",
        data: myProperties,
        dataType: "json",

        success: function(response) {

            console.log(response);
            var newposts = response.posts;
            $(newposts).hide().appendTo('#posts').fadeIn(800);;

            if(response.lastpost){
                console.log('nodata');
                $this.attr('disabled', 'disabled');
            }

            // scroll to last posts (not working)
            $('#posts').animate({scrollTop: $('#posts').get(0).scrollHeight}, 300);

            // Update the offset
            $this.data('offset', offset);
        },

        error: function(response){
            console.log(response);
        },

    }).fail(function(jqXHR,textStatus,errorThrown) {
        console.log(errorThrown);
    }); // ajax

}); // load more

scrollTop 関数を正しく理解しているかどうかわかりません。追加するアイテムまたは追加するコンテナに適用する必要がありますか?

追加されたフィドル

4

1 に答える 1

0

これを使って

 var post= $('#posts');
  var height = post[0].scrollHeight;
  post.scrollTop(height);

このコードを Css に追加します

 #posts{
   width: 200px;
   height: 300px;
   overflow-y: scroll;
 }
于 2015-03-11T05:32:24.353 に答える