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中。我应该在jquery中使用insertAfter函数完成它，如下所示：

$('#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所示。

添加另一个div会动态推送前一个div的所有滚动

1 个答案: