Question

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

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

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

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

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

Answer 2

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

Answer 3

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

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

Answer 4

我认为它运作正常。根据{{1}} jQuery documentation：

.offset（）方法允许我们检索一个的当前位置元素相对于文档

所以你遇到的问题是你试图滚动offset()但是使用文档中元素的scrollTop的值，而不是列表中的值。要解决这个问题，只需考虑父级的scrollTop（ul）来纠正该值：

ul

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

jQuery offset（）。top返回错误的值 - 带有margin的错误

4 个答案: