The scrollTop value of mat-drawer-content is not being read in a different component until interacting with screen

Question

The whole goal is to make a scroll to the top button on a certain page. The actual scrolling works, but the button is not shown on page scroll.

Originally, I called to the scrollable mat-drawer-content container using plain Javascript: document.getElementsByClassName('mat-drawer-content')[0] and kept calling this to update the local scrollingContainer variable on mouseover. I have been told I can't use mouseover as this doesn't work too well with mobile.

Currently, I am trying "@ViewChild('tryMe') tryMe: ElementRef;" on the mat-drawer-content scrolling container and passing it thru NGRX to my page component. The results are still similar though.

<button mat-fab (click)="scrollToTop(scrollContainer)" class="scrollToTop" *ngIf="scrollContainer.elementRef.nativeElement.scrollTop"
matTooltip="Scroll to Top" color="plain">
<mat-icon>north</mat-icon>
</button>

This button remains invisible until I hover over a tiptool or click on a button. The scrollToTop is definitely 0 at the top. And the value does change when I call the Javascript command.

It feels so close, but so far away. So any help would be appreciated.

Answer 1

I used this code in the my component. Similar to How to detect scroll events in mat-sidenav-container

`ngAfterViewInit() {
    const content = document.getElementsByClassName('mat-drawer-content')[0];
        this.scroll$ = fromEvent(content, 'scroll').pipe(
           throttleTime(10), // only emit every 10 ms
           map(() => content.scrollTop), 
           distinctUntilChanged(),
        );
 }`