javascript - 更改主体高度后保持滚动位置

Question

我正在处理具有两种状态的页面：编辑模式和正常模式。用户通过单击切换按钮在这些状态之间切换。触发编辑模式会向页面添加更多元素（按钮等），从而强制body元素增加其高度。

当用户向下滚动页面然后触发编辑模式时，就会出现我的问题 - 由于页面的高度现在已经增加，因此他们当前的滚动位置会丢失。我一直在尝试找到一种方法来计算新的scrollTop应该是什么，但没有成功。

我有一个 jsFiddle 作为我的问题的一个例子。它会自动滚动到第三个“条目”，以模拟用户向下滚动了那么远。点击右上角的“触发更改”按钮会在页面中添加更多元素，页面顶部的第三个条目的滚动位置丢失。

我知道我可以$('body').scrollTop($('.entry:nth-child(3)').offset().top);在添加新内容后重做，但我希望无论用户滚动到页面上的哪个位置都可以记住滚动位置。

任何帮助是极大的赞赏！

score 1 · Accepted Answer

我添加了这个

var tempScrollTop = $(window).scrollTop();
//your append logic
$(window).scrollTop(tempScrollTop+9);

您会注意到我在滚动位置添加了“9”。它适合您在给定小提琴中的要求。但是，当您在实际站点上实现此功能时，您必须动态计算新附加 div 的高度并添加该高度而不是“9”。

score 0 · Accepted Answer

要在元素上方发生更改后将元素保留在窗口中的位置，请尝试以下操作：

var tmp = $('#element').offset().top - $(document).scrollTop();
// add stuff
$(document).scrollTop($('#element').offset().top - tmp);

2 回答 2