javascript - 将新项目添加到 scrollabe div 的底部

Question

我正在尝试通过单击 javascript 中的按钮将 div 附加到另一个 div 的底部，但是一旦达到外部容器的高度，插入后它就不再将列表滚动到底部。

请在此处查看小提琴

如果单击红色添加按钮，直到列表中出现大约 13 个项目，则 scrollTop 函数似乎出现问题，并且它不再正常运行（在同一位置徘徊）。

我对此很迷茫，并为容器和侧面 div 尝试了一堆不同的 css 设置组合。请帮我。

Answer 1

采用

list.scrollTop(list.get(0).scrollHeight);

而不是

list.scrollTop($(".active").offset().top);

Answer 2

我已将您的代码重新格式化为更具 jQuery 风格。然而，主要的变化是改变list.scrollTop()函数，使它只滚动到底部list：

$(document).ready(function() {
    var list = $("#q-d-list");

    $(document).on('click', '#add', function() {
        $('.active', list).removeClass("active");

        var count = list.children().length + 1;
        var active = $('<div />', {
            'data-qid': count,
            'class': 'mli active'
        }).text('q' + count).appendTo(list);

        list.scrollTop(list[0].scrollHeight);
    });
});​

演示：http: //jsfiddle.net/MrvcB/19/

Answer 3

尝试：

$(document).ready(function () {
var count = 2;

    $("#add").live("click", function () {
        var list= $("#q-d-list");

        // remove the active class from the old item
        var $clone = $(list.find("div:last-child").removeClass("active").clone());
        count+=1;

        var str_count = "q"+count.toString();
        $clone.addClass("active").attr("data-qid",str_count).text(str_count);
        list.append($clone);
        list.scrollTop(list.get(0).scrollHeight);        
    });
});

http://jsfiddle.net/H4Kb3/