确定元素在可滚动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>