Scroll Position of a Div added Dynamically in Angular

I have a list that adds dynamic components that aren’t created until results are returned from the server. After everything is loaded and fetched…the scrollTop of the dynamically added divs are all 0. I assume the dom is unaware of the position of the newly added divs at the time I am trying to determine their position or if what I am trying to do is even possible.

<div class="item" *ngFor="let item of list$ | async">
    <my-component class="my-comp" [data]="item"></my-component>
<div>

Then in a function i call when scrolling… the component position always returns 0:

onScroll() {
    const elem = this.ref.nativeElement.querySelector('.my-comp');
    console.log(`ELEM: `, elem);
    console.log(`ELEM SCROLL TOP: `, elem.scrollTop); //Always 0
}

My use case is to have dynamically loaded video components where I have control the video play/pause states based on the users scrolling. Again…these components are not created or added until well after the view itself has been created. Any help is much appreciated.