javascript 如何防止在前置时滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5688362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent scrolling on prepend?
提问by fancy
I'm prepending content to the top of the body. Sometimes this content can be 400-500px tall, and when something like this gets added, pushing the content down when you are reading the page it can be really annoying.
我正在将内容添加到正文的顶部。有时此内容可能有 400-500 像素高，当添加此类内容时，在您阅读页面时将内容向下推，这真的很烦人。
I want the items to be automatically prepended, not something like click here to see new items.
我希望项目自动预先添加，而不是像单击此处查看新项目那样。
Is there any way to prepend this content to the top of the body without moving the page? Then when a user scrolls to the top it is just there already?
有没有办法在不移动页面的情况下将此内容添加到正文的顶部？那么当用户滚动到顶部时它就已经在那里了吗？
采纳答案by Groovetrain
I've done it in the past by prepending the elements, then calculating their total outerheight, and setting the scrolltop to that value. Something like this:
我过去通过预先添加元素，然后计算它们的总外高度，并将滚动顶部设置为该值来完成它。像这样的东西：
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);
Hope this points you in the right direction.
希望这为您指明了正确的方向。
回答by Sheraff
I believe the most universal way to do this would be to simply measure the document height before and after you've modified it:
我相信最通用的方法是在修改之前和之后简单地测量文档高度：
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"
That way you can really do anything without the window moving away from the content you're reading :)
这样你就可以真正做任何事情，而不会让窗口远离你正在阅读的内容:)
回答by MRods
I took a slightly different approach:
我采取了稍微不同的方法：
Start by getting the first element of the body (or of another element if you're pretending to an element other than the body which is what I needed), then after prepending the new set of elements, use the offset(if need to scroll relative to body) or the position(if need to scroll relative to an ancestor element) function on the original first element to get its updated coordinates and scroll to that point.
首先获取主体的第一个元素（或者另一个元素，如果你假装我需要的不是主体的元素），然后在添加新的元素集之后，使用偏移量（如果需要滚动相对于主体）或位置（如果需要相对于祖先元素滚动）原始第一个元素上的函数以获取其更新的坐标并滚动到该点。
Something like:
就像是：
var current_top_element = $('body').children().first();
$('body').prepend(other_elements);
$('body').scrollTop(current_top_element.offset().top);
Or for something other than body scroll:
或者对于身体滚动以外的其他东西：
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);
Be aware that position()returns the element's position relative to its offset parent, so make sure to set the css position attribute of your parent element as needed ( http://api.jquery.com/offsetParent/)
请注意，position()返回元素相对于其偏移父元素的位置，因此请确保根据需要设置父元素的 css position 属性（http://api.jquery.com/offsetParent/）
For more details refer to: http://api.jquery.com/category/offset/
更多详情请参考：http: //api.jquery.com/category/offset/
回答by MRods
I know, I'm very late to that topic. Sorry for undigging it, but I discovered a very simple way for preventing scrolling to top when you prepend elements to the body.
我知道，我很晚才讨论这个话题。很抱歉没有挖掘它，但我发现了一种非常简单的方法来防止在将元素添加到正文时滚动到顶部。
The auto-scrolling appends when the scroll Y-position is at zero. Simply do this :
当滚动 Y 位置为零时，自动滚动附加。只需这样做：
element.scrollTo(0, 1);
And your element won't automatically go to the top after the prepend.
并且您的元素在前置后不会自动进入顶部。
