增加內部的div動態推高了以前的div的所有卷軸

Question

我的HTML看起來像這樣：

<div id="main"> 
    <div style="height:200px; width:100px; overflow:scroll; display:inline-block;"> 
    hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> 
    </div> 
</div> 
<input type="submit" id="clickme" /> 

和我的jQuery看起來是這樣的：

$('#clickme').on('click', function() 
{ 
    $('#main').html($('#main').html() + '<div style="height:200px; width:100px; overflow:scroll; display:inline-block;"> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/></div>'); 
}); 

這是一個活生生的例子here。

當我向下滾動第一個div並單擊提交時，它應該在其右側添加另一個div，但不會向上滾動第一個div。花了很長時間才意識到問題出在哪裏，所以我想我會分享它。

Answer 1

雖然解決方案很簡單。我以錯誤的方式將控件添加到html中。我應該使用insertAfter功能做了jQuery中是這樣的：

$('#clickme').on('click', function() 
{ 
    $('<div style="height:200px; width:100px; overflow:scroll; display:inline-block;"> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> hi<br/> </div>') 
    .insertAfter($('#main').children().last()); 
}); 

如本link。