0

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.

kian
  • 1,449
  • 2
  • 13
  • 21
Jess Flintstone
  • 1
  • 2
  • I'm passing tryMe (the scrolling container) like this: `ngAfterViewInit(): void { if (this.tryMe) { this.store.dispatch(setScrollContainer({scrollContainer: this.tryMe})); // this.store.dispatch(setScrollContainer({scrollContainer: this.tryMe.elementRef.nativeElement})); } }` – Jess Flintstone Oct 08 '21 at 22:23

1 Answers1

0

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(),
        );
 }`
Jess Flintstone
  • 1
  • 2