jQuery offset().top returns 错误值 - 边距错误

Question

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

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

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

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

Answer 1

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

The .offset() method allows us to retrieve the current position of an element relative to the document

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

$(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

Answer 2

您的问题：

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

我建议你将 .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 如果parent是相对定位的，则从top到parent计算。

$(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 3

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

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

Answer 4

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

jQuery offset().top returns 错误值 - 边距错误

jQuery offset().top returns wrong value - error with margin

javascript

jquery

html

css

jquery-animate