当将数据预挂到垂直滚动的文档时，如何保持先前的部分可见?

时间：2021-08-23 19:48:15

This is a part of infinite scroll which also works when we scroll upwards:

这是无限卷轴的一部分，当我们向上卷轴时，它也可以工作:

<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 code :

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/

Js小提琴:http://jsfiddle.net/LRLR/ocfLkxex/

Issue:

问题:

Whenever prependTo is called, the data is shifted downwards and new data is added at the top. The scrollbar seems to ignores this, and from the users' point of view, everything he was reading gets pushed down. After a few times, what user was reading gets pushed out of the visible area, and user must scroll down to continue reading.

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

Desired:

期望:

I want the user to be able to read long content without having to (re)scroll when new items are added at the top of the list. Ideally, if user scrolled so that i.e. "Initial Content 444" is at the top of the view, when new items are added, it should keep its visual position. New items should be added "above" it without visually moving the current contents.

我希望用户在列表顶部添加新条目时，能够阅读长内容，而不必(重新)滚动。理想的情况是，如果用户滚动。“初始内容444”在视图的顶部，当添加新项时，它应该保持其视觉位置。新项目应该添加在“上面”，而不是视觉上移动当前内容。

Why doesn't the scrollbar keep those elements visible already?
How can I configure the scrollbar to behave like I want?

为什么滚动条不让这些元素保持可见?如何将滚动条配置为我想要的方式?

1 个解决方案

#1

7  

This is an obvious behavior. You are adding new elements, which changes the height if the content. This leads to the change in body scrollTop value too.

这是一个明显的行为。您正在添加新元素，如果内容改变了高度。这也导致了body scrollTop值的改变。

What you can do is to calculate the total height of the added content (plus margins) and after appending new content you should reset body/html scrollTop with the old scrollTop + appended content height.

您可以做的是计算添加内容的总高度(加上边距)，在添加新内容之后，您应该使用旧的scrollTop +附加内容高度重置body/html scrollTop。

Your meta example then would be something like this:

你的元示例是这样的:

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);

Demo: http://jsfiddle.net/ocfLkxex/1/

Note. I hardcoded magic number 10 for margin value, in your case you can use a constant or calculate it dynamically of course (preferred, e.g. .css('marginTop')).

请注意。我硬编码了10作为边际价值，在你的情况下，你可以使用一个常量或者动态地计算它(首选，例如.css('marginTop'))。

#1

7  

This is an obvious behavior. You are adding new elements, which changes the height if the content. This leads to the change in body scrollTop value too.

这是一个明显的行为。您正在添加新元素，如果内容改变了高度。这也导致了body scrollTop值的改变。

What you can do is to calculate the total height of the added content (plus margins) and after appending new content you should reset body/html scrollTop with the old scrollTop + appended content height.

您可以做的是计算添加内容的总高度(加上边距)，在添加新内容之后，您应该使用旧的scrollTop +附加内容高度重置body/html scrollTop。

Your meta example then would be something like this:

你的元示例是这样的:

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);

Demo: http://jsfiddle.net/ocfLkxex/1/

Note. I hardcoded magic number 10 for margin value, in your case you can use a constant or calculate it dynamically of course (preferred, e.g. .css('marginTop')).

请注意。我硬编码了10作为边际价值，在你的情况下，你可以使用一个常量或者动态地计算它(首选，例如.css('marginTop'))。

标签：

相关文章