javascript - 将数据添加到垂直滚动文档时，如何保持前面的部分可见？

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 时，数据都会向下移动并在顶部添加新数据。滚动条似乎忽略了这一点，从用户的 Angular 来看，他正在阅读的所有内容都被压低了。几次后，用户正在阅读的内容被推出可见区域，用户必须向下滚动才能继续阅读。

期望:

我希望用户能够在列表顶部添加新元素时无需(重新)滚动来阅读长内容。理想情况下，如果用户滚动使得“初始内容 444”位于 View 顶部，则在添加新元素时，它应该保持其视觉位置。应在其“上方”添加新元素，而无需在视觉上移动当前内容。

为什么滚动条不让这些元素保持可见？
如何配置滚动​​条使其表现得如我所愿？

Answer 1

这是一个明显的行为。您正在添加新元素，这会更改内容的高度。这也会导致 body scrollTop 值发生变化。

您可以做的是计算添加内容的总高度(加上边距)，并且在添加新内容后您应该使用旧的 scrollTop + 附加内容高度重置 body/html 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/

注意。我将魔数(Magic Number) 10 硬编码为边距值，在您的情况下，您当然可以使用常量或动态计算它(首选，例如 .css('marginTop'))。