Javascript Div.scrollTop会过早地滚动

我正在构建一个聊天系统，我试图在添加到

div

“服务器输出”时设置文本动画，但也要保持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');
}

函数输出（名称、消息、flt、clss）{
var字符串=\
“+name+”：\
“+msg+”\
';
$（字符串）.appendTo（'.server output'）.hide（）；
$（“.server output”）.scrollTop（$（.server output”）[0].scrollHeight）；//滚动到div的底部
$（'.+clss+':last，'.+flt+':last'）。显示（'fast'）；
}

这适用于只占用一行的文本，但当它占用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');
}

函数输出（名称、消息、flt、clss）{
var字符串=\
“+name+”：\
“+msg+”\
';
$（字符串）.appendTo（'.server output'）.css（'可见性''hidden'）；
$（“.server output”）.scrollTop（$（.server output”）[0].scrollHeight）；//滚动到div的底部
$（'.+clss+':last，'.+flt+':last'）.css（'visibility''visible'）；
}

试试这个

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);
}

函数输出（名称、消息、flt、clss）{
var字符串=\
“+name+”：\
“+msg+”\
';
$（字符串）.appendTo（'.server output'）.css（“不透明度”，0）；
$（“.server output”）.scrollTop（$（.server output”）[0].scrollHeight）；//滚动到div的底部
$（'.+clss+':last，'+flt+':last'）。设置动画（{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);
}

函数输出（名称、消息、flt、clss）{
var字符串=\
“+name+”：\
“+msg+”\
';
var$string=$（string.appendTo（'.server output'）；
$string.css（“不透明度”，0）；
$（“.server output”）.scrollTop（$（.server output”）[0].scrollHeight）；//滚动到div的底部
$string.animate（{opacity:1}，500）；
}

@Archer你这是什么意思？他有

.show（“fast”）

-这和让它可见不一样你说得对。。。这将需要存储旧高度，然后在它变为可见高度时将其设置为新高度，或者更改不透明度-取决于OP真正需要什么，但是-因为这不是问题的一部分，我觉得没有必要使问题复杂化-这是问题的一部分-它在页面顶部的代码中：实际上，现在我想到了这一点——只要做

.hide（）.css（'visibility''visible'）.show（'fast'）

就可以了，因为此时滚动位置应该已经正确了——如果元素不位于文档的最底部，请小心

不透明度
，由于它的支持在较旧和非标准的浏览器中受到某种程度的限制——当然，但你可以这样说任何东西（包括jQuery！），在我看来它都足够安全了。。。真的取决于目标受众——旧手机、旧歌剧、旧安卓、不同国家的过时程度不同：）但是+1对于解决方案来说并非如此——第二个功能起作用了！比预期的要好。这让我摆脱了一些无聊的胡说八道，我在别的地方做+1名弓箭手。“那是一只公牛的眼睛。”里德很高兴我能帮上忙：）