jQuery offset().top 返回错误值 - 边距错误答案

【问题标题】：jQuery offset().top returns wrong value - error with marginjQuery offset().top 返回错误值 - 边距错误
【发布时间】：2015-05-30 10:03:29
【问题描述】：

如果您尝试从父项中的列表元素获取顶部偏移量，并且该父项未位于顶部，则会得到错误的值。

http://jsbin.com/yuxacuduna/1/edit?html,css,js,console,output

尝试删除.container 元素上的margin-top，您会发现它会起作用。

这个问题的解决方案是什么？

【问题讨论】：

标签： javascript jquery html css jquery-animate

【解决方案1】：

你的问题：

这个问题有什么解决办法？

我建议你将.container定位到relative：

.container{
  margin-top:100px;
  background:yellow;
  height:600px;
  width:300px;
  overflow-y:auto;
  overflow-x:hidden;
  position:relative; /*<---add this*/
}

在你的脚本中使用.position().top，它会让你的生活更轻松：

$('.container li:nth-child(7)').css("background", "red");
$('.container').animate({
    scrollTop: $('.container li:nth-child(7)').position().top
});

.offset().top：
说明：获取匹配元素集中第一个元素的当前坐标，相对于文件..

.position().top：
来自文档：

说明： 获取匹配元素集合中第一个元素相对于偏移父元素的当前坐标。

.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>

【讨论】：

最佳解决方案，因为这不需要知道动画元素的嵌套位置。在其他发布的答案中，有必要知道父元素是否有边距。
相对定位ftw！
但是通常不会从元素的 offset.top() 中减去有问题的元素的 position().top 也可以解决它吗？
这个答案实际上可以在没有父级相对定位的情况下工作。
4 年答案今天仍然有效，你救了我的命

【解决方案2】：

如果您的某些内容是图像，您也可能会遇到此问题。如果您在 document.ready() 中调用 .offset()，则图像可能尚未加载。尝试将您的 .offset() 调用移至 window.load()。

【讨论】：

这应该是正确的答案。在 document.ready() 中使用 offset.top 会返回古怪的结果。我得到的数字大于我的视口，但使用 window.load() 有效！

【解决方案3】：

我遇到了同样的问题。网络上的所有解决方案都不适合我。

如果您使用边距来分隔某些没有边框的元素，请改用填充。 jQuery 的 offset() 将计算填充但不包括边距。 offset() 中的位置编号将再次正确。

【讨论】：

【解决方案4】：

我认为它工作正常。根据offset()jQuery documentation：

.offset() 方法允许我们检索当前位置相对于文档的元素

因此，您遇到的问题是您尝试滚动 ul，但使用 文档内元素的 scrollTop 值，而不是列表内。要解决这个问题，只需通过考虑父级的 scrollTop（ul）来更正该值：

$(function(){
    $('.container li:nth-child(7)').css("background", "red");
    $('.container').animate({
        scrollTop: $('.container li:nth-child(7)').offset().top - $(".container").offset().top
    });
});

您可以看到它正在对您的 JSBin 进行此编辑：http://jsbin.com/fanixodiwi/1/edit?html,css,js,console,output

【讨论】：