How to know element is outside the boundary of main parent element in angularjs 2 (Not direct parent)

Question

<div class="nodelevel1">

<div class="nodelevel2">

<div class="nodelevel3">

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

</div>

</div>

</div>

I want to know if item element is outside the boundary of nodelevel1 element when it render on browser and i want to get its top and left position relative to nodelevel1

Answer 1

This is a start on a solution, getting the position of a child element relative to its immediate parent:

Get position/offset of element relative to a parent container?

Iterate that over two more levels of parents, and you'll have the position of item relative to nodelevel1.

Then do the math on the bounding rects to see if the bounding rect of item spills outside of the bounding rect of nodelevel1.