Определите, видим ли элемент внутри прокручиваемого DIV - Angular 7

Question

У меня есть родительский div с дочерними элементами внутри. Родительский div overflowY установлен на scroll. Я пытаюсь создать функцию, которая будет возвращать логическое значение, когда определенный дочерний элемент виден внутри этого родительского элемента просмотра div или нет. Также я хочу знать, нужно ли мне прокручивать вверх или вниз, чтобы просмотреть этот элемент. Весь день я пробовал разные функции, но просто не могу заставить их работать. Моя текущая функция выглядит так:

  checkOverflow(el: any) {
  let top = el.offsetTop;
  let left = el.offsetLeft;
  let width = el.offsetWidth;
  let height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }
  return (
    top < (window.pageYOffset + window.innerHeight) &&
    left < (window.pageXOffset + window.innerWidth) &&
    (top + height) > window.pageYOffset &&
    (left + width) > window.pageXOffset
  );
  }

HTML выглядит так (! Образец)

<div class="parent-div">
<div class="child-div"></div>
<div class="child-div"></div>
<div class="child-div"></div>
</div>