Javascript jQuery offset().top 返回错误值 - 边距错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29277608/
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
jQuery offset().top returns wrong value - error with margin
提问by user3631654
if you try to get a top offset from a list element within a parent, and that parent is not positioned at the top, you will get a wrong value.
如果您尝试从父级中的列表元素获取顶部偏移量，并且该父级未位于顶部，则会得到错误的值。
http://jsbin.com/yuxacuduna/1/edit?html,css,js,console,output
http://jsbin.com/yuxacuduna/1/edit?html,css,js,console,output
Try removing the margin-topon the .containerelement and you will see it will work.
尝试删除元素margin-top上的.container，您会看到它会起作用。
What is the solution for this problem?
这个问题的解决方案是什么？
回答by Jai
Your question:
你的问题：
What is the solution for this problem?
这个问题的解决方案是什么？
I suggest you to position the .containerto relative:
我建议你定位.container到relative：
.container{
margin-top:100px;
background:yellow;
height:600px;
width:300px;
overflow-y:auto;
overflow-x:hidden;
position:relative; /*<---add this*/
}
and within your script use .position().top, it will make your life easier:
在你的脚本中使用.position().top，它会让你的生活更轻松：
$('.container li:nth-child(7)').css("background", "red");
$('.container').animate({
scrollTop: $('.container li:nth-child(7)').position().top
});
.offset().top:
Description: Get the current coordinates of the first element in the set of matched elements, relative to the document..
.offset().top:
描述: 获取匹配元素集中第一个元素的当前坐标，相对于文档..
.position().top:
From the docs:
.position().top：
来自文档：
Description:Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.
描述：获取匹配元素集中第一个元素的当前坐标，相对于偏移父元素。
.position().topis calculated from the top to the parent if parent is relatively positioned.
.position().top如果父级相对定位，则从顶部到父级计算。
$(function() {
$('.container li:nth-child(7)').css("background", "red");
$('.container').animate({
scrollTop: $('.container li:nth-child(7)').position().top
});
});html,
body {
margin: 0;
padding: 0;
}
.container {
margin-top: 100px;
background: yellow;
height: 600px;
width: 300px;
overflow-y: auto;
overflow-x: hidden;
position: relative;
}
.container ul {
margin: 0;
padding: 0;
list-style: none outside none;
}
.container li {
background: blue;
display: block;
height: 150px;
width: 100%;
padding: 10px;
margin-bottom: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul>
<li>asdasd</li>
<li>asdasd</li>
<li>asdasd</li>
<li>asdasd</li>
<li>asdasd</li>
<li>asdasd</li>
<li>asdasd77</li>
<li>asdasd</li>
<li>asdasd</li>
<li>asdasd</li>
<li>asdasd</li>
</ul>
</div>回答by Nate
You can also encounter this problem if some of your content is images. If you're calling .offset() inside document.ready(), the images may not have loaded yet. Try moving your .offset() call to window.load().
如果您的某些内容是图像，您也可能会遇到此问题。如果您在 document.ready() 中调用 .offset()，则图像可能尚未加载。尝试将您的 .offset() 调用移动到 window.load()。
回答by Eric Luo
I had the same problem. All solutions in the web don't work for me.
我有同样的问题。网络上的所有解决方案都不适用于我。
If you use margin to seperate certain elements without borders, use padding instead. jQuery's offset() will count for paddings but excludes margins. The position numbers in offset() will become correct again.
如果您使用边距来分隔某些没有边框的元素，请改用填充。jQuery 的 offset() 将计算填充但不包括边距。offset() 中的位置编号将再次正确。
回答by Alvaro Montoro
I think it's working properly. According to the offset()jQuery documentation:
我认为它工作正常。根据offset()jQuery 文档：
The .offset() method allows us to retrieve the current position of an element relative to the document
.offset() 方法允许我们检索元素相对于文档的当前位置
So the problem that you have is that you are trying to scroll the ulbut with the value of the scrollTop of the element within the document, and not within the list. To fix that, just correct the value by taking into account the scrollTop of the parent (the ul):
因此，您遇到的问题是您正在尝试使用 document 中ul元素的 scrollTop 值滚动，而不是在列表中滚动。要解决这个问题，只需通过考虑父级 (the )的 scrollTop 来更正值：ul
$(function(){
$('.container li:nth-child(7)').css("background", "red");
$('.container').animate({
scrollTop: $('.container li:nth-child(7)').offset().top - $(".container").offset().top
});
});
You can see it working on this edit of your JSBin: http://jsbin.com/fanixodiwi/1/edit?html,css,js,console,output
您可以看到它正在对您的 JSBin 进行此编辑：http://jsbin.com/fanixodiwi/1/edit?html,css,js,console,output
