追加后无法滚动

时间:2014-05-03 07:47:18

标签: javascript jquery html css

我正在尝试从json文件中获取数据,然后将数据作为listitem附加到无序列表中。

因此它成功列出,但我不能再滚动它。

以下是我的Javascript的样子:

function ListViewData(allpost) {
    allposts = allpost;
    $.each(allpost.posts, function (i, row) {
        if (row.thumbnail_images) {
            $(".list__container").append('<li class="list__item list__item--tappable list__item__line-height list-item-container">' +
                '<div class="list-item-main">' +
                '<div class="list-item-left">' +
                '<img src="' + row.thumbnail_images['full'].url + '" class="thumbnail" width="80" height="80">' +
                '</div>' +
                '<div class="list-item-right">' +
                '<div class="list-item-content">' +
                '<span class="list-item-name">' + row.title + ' &nbsp; ' +
                '<br/>' +
                '<span class="lucent">' +
                '<i class="fa fa-map-marker"></i>&nbsp; Paris, France' +
                '</span>' +
                '</span>' +
                '<br/>' +
                '<span class="list-item-text" style="margin-top:16px;">Eiffel Tower is the symbol of Paris and named by Gustave Eiffel.' +
                '</span>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '<span class="list-item-action" >' +
                '<i class="fa fa-angle-right"></i>' +
                '</span>' +
                '</li>');
        }
        $(".list__container").listview();
    });
    $('.list__container').animate({
        scrollTop: $('.list__container').prop("scrollHeight")
    }, 500);
}

以下是我的HTML代码的样子:

<div class="list list-top">
<ul class="list__container">
 //here append data comes in place   
</ul>
</div>

1 个答案:

答案 0 :(得分:0)

而不是

$('.list__container').animate({
    scrollTop: $('.list__container').prop("scrollHeight")
}, 500);

尝试

$("html,body").animate({
    scrollTop: $('.list__container').prop("scrollHeight")
}, 500);