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

所需：

我希望用户能够阅读长内容，而无需在列表顶部添加新项目时重新滚动。理想情况下，如果用户滚动，即＆＃34;初始内容444＆＃34;在视图的顶部，当添加新项目时，它应保持其视觉位置。应添加新项目＆＃34;以上＆＃34;它没有直观地移动当前内容。

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

Answer 1

这是一个明显的行为。您正在添加新元素，如果内容更改了高度。这也会导致身体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/

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

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

1 个答案:

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