Div.scrollTop過早滾動

Question

我正在構建一個聊天系統，我試圖在附加到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'); 
} 

這適用於只佔用一行的文本，但當它佔用2個或更多的滾動事件不會向下滾動足夠多時。

有沒有辦法隱藏的元素，同時保持它們的結構（如一個無形的東西？）

OR

有一些更好的方式來做到這一點？它現在編碼的方式，幾乎是雞和雞蛋的問題。我不能滾動，直到元素存在，但爲了看到元素的動畫，我必須在它下面滾動。

在此先感謝！

Answer 1

因爲您隱藏.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'); 
} 

Answer 2

嘗試......

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