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.