Получить позицию элемента относительно родительского элемента независимо от значения "position" css родительского элемента - PullRequest
Новая
       27

Получить позицию элемента относительно родительского элемента независимо от значения "position" css родительского элемента

0 голосов
/ 09 июля 2019

Есть несколько вопросов о получении позиции элемента относительно его родительского элемента, но ответ всегда заканчивается чем-то вроде «вычитать позицию родителя из дочернего элемента».Тем не менее, это не работает во всех случаях ... например, когда родительский элемент position: relative или absolute.

Мне нужно решение, которое даст мне относительную позицию заданногоэлемент в данном родительском элементе (не прямой родитель), который будет работать независимо от того, какое значение CSS позиции родительского (или любого элемента между ними). ​​

Мне нужно только измерение Y (верхнее).

Я пробовал разные комбинации offsetTop, getBoundingClientRect().top, jQuery position() и jQuery offset(), но ни одна из них не смогла точно сказать мне положение div вданного родителя.

Единственное, что сработало, это вычитание offsetTop родителя из дочернего элемента, где все связанные элементы равны static.Если хотя бы один элемент в цепочке равен 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>

скрипка здесь

1 Ответ

0 голосов
/ 09 июля 2019

Подробное написание вопроса часто помогает мне найти ответ.Мне кажется, я нашел решение: 

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

рабочая скрипка

Не работает, когда $in является элементом html, поэтомуЯ должен был сделать исключение для этого.

...