Question

关于获取元素相对于其父元素的位置有几个问题，但是答案总是以“从孩子减去父元素的位置”这样的结尾。但是，这似乎并非在所有情况下都有效……例如，当父元素为position: relative或absolute时。

我需要一个解决方案，该解决方案将为我提供给定元素在给定父元素（不是直接父元素）中的相对位置，无论父元素（或介于两者之间的任何元素）的CSS值在什么位置，该方法都将起作用。

我只需要Y（顶部）尺寸。

我尝试了offsetTop，getBoundingClientRect().top，jQuery的position()和jQuery的offset()的不同组合，但是没有一个能够准确地告诉我位置给定父级中div的值。

唯一起作用的是从子项中减去父项的offsetTop，其中所有相关元素均为static。如果链中甚至一个div为relative，它都会中断。

// this is the function I need to work in every situation:
function getRelativePosition($of, $in) {
  return $of[0].offsetTop - $in[0].offsetTop;
}

function answer() {
  $("#answer").html("");
  var answerNum = 1;
  $(".findMe").each(function() {

    var answer = getRelativePosition($(this), $(this).closest(".scroller"));

    $("#answer").append(answerNum + ") " + answer + "<br>");
    answerNum++;

  });
}

$(".scroller").scroll(function() {
  answer();
});
answer();

.spacer {
  background: green;
  height: 20px;
}

.scroller {
  height: 50px;
  overflow-y: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="position: relative;" class="scroller">
  <div class="spacer">
    scroll me
  </div>
  <div class="findMe">
    1
  </div>
  <br><br><br><br><br><br><br>
</div>
<div style="position: static;" class="scroller">
  <div class="spacer">
    scroll me
  </div>
  <div class="findMe">
    2
  </div>
  <br><br><br><br><br><br><br>
</div>

<div style="position: static;" class="scroller">
  <div style="position: relative">
    <div class="spacer">
      scroll me
    </div>
    <div class="findMe">
      3
    </div>
    <br><br><br><br><br><br><br>
  </div>
</div>

Answers should all be "20", even after scrolling the boxes
<div id="answer">

</div>

fiddle here

Answer 1

详细列出问题通常可以帮助我找到答案。我相信我现在已经找到了解决方案：

function getRelativePosition($of, $in) {
  return $of.offset().top - $in.offset().top + $in.scrollTop();
}

working fiddle

当$in是html元素时，它不起作用，因此我不得不为此设置例外。

获取元素相对于父元素的位置，而不管父元素的CSS“位置”值如何

1 个答案: