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

Question

如果您尝试从父级中的列表元素获取顶部偏移量，而该父级不位于顶部，您将得到错误的值。

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

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

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

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>