如何防止在前面滚动？

Question

我将内容添加到正文的顶部。有时此内容可能有 400-500 像素高，当添加此类内容时，在阅读页面时将内容向下推会非常烦人。

我希望自动添加项目，而不是单击此处查看新项目。

有什么方法可以在不移动页面的情况下将此内容添加到正文顶部？那么当用户滚动到顶部时它就已经在那里了？

Answer 1

我相信最通用的方法是简单地测量修改前后的文档高度：

var old_height = $(document).height();  //store document height before modifications
var old_scroll = $(window).scrollTop(); //remember the scroll position

//do anything
$("p:first").prepend( "<p>I just became first</p>" );

$(document).scrollTop(old_scroll + $(document).height() - old_height); //restore "scroll position"

这样你就可以真正做任何事情，而窗口不会离开你正在阅读的内容:)

Answer 2

我过去通过添加元素，然后计算它们的总外部高度，并将滚动顶部设置为该值来完成此操作。像这样的：

var $current_top_element = $('body').children().first();
$('body').prepend(other_elements);

var previous_height = 0;
$current_top_element.prevAll().each(function() {
  previous_height += $(this).outerHeight();
});

$('body').scrollTop(previous_height);

希望这会为您指明正确的方向。

Answer 3

我采取了稍微不同的方法：

首先获取 body 的第一个元素（或者如果你假装我需要的 body 以外的元素，则为另一个元素），然后在添加新的元素集之后，使用 offset （如果需要相对于 body 滚动）或 position （如果需要相对于祖先元素滚动）函数在原始第一个元素上获取其更新的坐标并滚动到那个观点。

类似：

var current_top_element = $('body').children().first();
$('body').prepend(other_elements);

$('body').scrollTop(current_top_element.offset().top);

或者对于身体滚动以外的东西：

var current_top_element = $('#ul-element-id li:first'); //example with a list
$('#ul-element-id').prepend(other_elements);

$('#ul-element-id').scrollTop(current_top_element.position().top);

请注意 position() 返回元素相对于其 offset parent 的位置，因此请确保根据需要设置父元素的 css 位置属性（@ 987654321@)

更多详情请参考： http://api.jquery.com/category/offset/

Answer 4

我知道，我对这个话题很晚了。很抱歉取消了它，但是我发现了一种非常简单的方法，可以在将元素添加到正文时防止滚动到顶部。

当滚动 Y 位置为零时，自动滚动附加。只需这样做：

element.scrollTo(0, 1);

并且您的元素不会在前置后自动转到顶部。