Question

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

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

我对此非常迷失，并为容器和side div尝试了一系列不同的css设置组合。请帮我。

Answer 1

使用

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

而不是

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

Answer 2

我已经将您的代码重新格式化为jQuery-esque。然而，主要的变化是更改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/

将新项添加到可滚动div的底部

3 个答案: