在将数据添加到垂直滚动文档时,如何保持上一部分可见？

Question

这是无限滚动的一部分,当我们向上滚动时也是如此:

<div id="sContainer">
    <div class="message0">Initial Content 111</div>
    <div class="message1">Initial Content 222</div>
    <div class="message2">Initial Content 333</div>
    <div class="message3">Initial Content 444</div>
    <div class="message4">Initial Content 555</div>
    <div class="message5">Initial Content 666</div>
    <div class="message6">Initial Content 777</div>
</div>

JS代码:

var dataAbc = '<div class="message7">Focus Shifted Here</div>';
setTimeout(function(){  $(dataAbc).prependTo("#sContainer");},3000);
setTimeout(function(){  $(dataAbc).prependTo("#sContainer");},3000);
setTimeout(function(){  $(dataAbc).prependTo("#sContainer");},3000);
setTimeout(function(){  $(dataAbc).prependTo("#sContainer");},3000);

Js Fiddle:http://jsfiddle.net/LRLR/ocfLkxex/

问题:

每当调用prependTo时,数据向下移动,新数据在顶部添加.滚动条似乎忽略了这一点,从用户的角度来看,他正在阅读的所有东西都被推倒了.几次之后,用户正在阅读的内容被推出可见区域,用户必须向下滚动才能继续阅读.

期望:

我希望用户能够阅读长内容,而无需在列表顶部添加新项目时(重新)滚动.理想情况下,如果用户滚动使得"初始内容444"位于视图的顶部,则当添加新项目时,它应保持其视觉位置.新项目应添加到"上方"​​,而不会直观地移动当前内容.

为什么滚动条不能保持这些元素可见？
如何配置滚动​​条以表现我想要的行为？

Answer 1

这是一个明显的行为.您正在添加新元素,如果内容更改了高度.这也导致身体scrollTop价值的变化.

你可以做的是计算所添加的内容(加上利润)的总高度,并追加新内容之后,你应该重新体/ HTML scrollTop的与旧的scrollTop的附加+内容高度.

你的元例子就是这样的:

setTimeout(function () {

    var top = $('body').scrollTop();

    top += $(dataAbc).prependTo("#sContainer").outerHeight() + 10;
    top += $(dataAbc).prependTo("#sContainer").outerHeight() + 10;
    top += $(dataAbc).prependTo("#sContainer").outerHeight() + 10;

    $('body, html').scrollTop(top);
}, 3000);

演示:http://jsfiddle.net/ocfLkxex/1/

注意.我10为边距值硬编码了幻数,在你的情况下你可以使用常量或者当然动态计算(例如,首选.css('marginTop')).