Question

我正在构建一个聊天系统，我试图在附加到div“server-output”时动画文本，但也保持div向下滚动以便可以看到动画。

function output(name, msg, flt, clss){
    var string = ' \
        <div class="'+flt+'">'+name+':</div> \
        <div class="'+clss+'"> '+msg+'</div> \
    ';
    $(string).appendTo('.server-output').hide();
    $(".server-output").scrollTop($(".server-output")[0].scrollHeight); // Scrolls to bottom of div
    $('.'+ clss + ':last, .'+flt+':last').show('fast');
}

这适用于仅占用一行的文本，但当它占用2或更多时，滚动事件不会向下滚动。

有没有办法隐藏元素，同时保持其结构（如隐形或其他东西？）

OR

有更好的方法吗？它现在的编码方式，几乎是一个鸡和蛋的问题。我不能滚动直到元素存在，但是为了看到元素的动画，我必须在它下面滚动。

提前致谢！

Answer 1

试试这个......

function output(name, msg, flt, clss){
    var string = ' \
        <div class="'+flt+'">'+name+':</div> \
        <div class="'+clss+'"> '+msg+'</div> \
    ';
    $(string).appendTo('.server-output').css("opacity", 0);
    $(".server-output").scrollTop($(".server-output")[0].scrollHeight); // Scrolls to bottom of div
    $('.'+ clss + ':last, .'+flt+':last').animate({ opacity: 1 }, 500);
}

它使用不透明度和淡入淡出来转换新文本，这应该在隐藏它时解决间距问题，然后再显示它。

另外，只是一个建议，你可以将添加的元素缓存为局部变量并通过它进行引用，而不是稍后进行jQuery解析......

function output(name, msg, flt, clss){
    var string = ' \
        <div class="'+flt+'">'+name+':</div> \
        <div class="'+clss+'"> '+msg+'</div> \
    ';
    var $string = $(string).appendTo('.server-output');
    $string.css("opacity", 0);
    $(".server-output").scrollTop($(".server-output")[0].scrollHeight); // Scrolls to bottom of div
    $string.animate({ opacity: 1 }, 500);
}

Answer 2

因为你隐藏了.server-output元素，jQuery无法正确计算其尺寸，因此会滚动到错误的位置。

您可以尝试应用.css('visibility', 'hidden')，然后再次通过.css('visibility', 'visible')显示该元素。这应该正确计算您的scrollTop位置。

function output(name, msg, flt, clss){
    var string = ' \
        <div class="'+flt+'">'+name+':</div> \
        <div class="'+clss+'"> '+msg+'</div> \
    ';
    $(string).appendTo('.server-output').css('visibility' 'hidden');
    $(".server-output").scrollTop($(".server-output")[0].scrollHeight); // Scrolls to bottom of div
    $('.'+ clss + ':last, .'+flt+':last').css('visibility' 'visible');
}

Div.scrollTop过早滚动

2 个答案: