在与屏幕交互之前，不会在不同的组件中读取 mat-drawer-content 的 scrollTop 值

Question

整个目标是滚动到特定页面的顶部按钮。实际滚动有效，但页面滚动时未显示按钮。

最初，我使用普通 Javascript 调用可滚动的 mat-drawer-content 容器：document.getElementsByClassName('mat-drawer-content')[0] 并不断调用它来更新本地 scrollingContainer鼠标悬停时的变量。有人告诉我我不能使用鼠标悬停，因为这在移动设备上效果不佳。

目前，我正在尝试“@ViewChild('tryMe') tryMe: ElementRef;”在 mat-drawer-content 滚动容器上并将其通过 NGRX 传递到我的页面组件。结果仍然相似。

<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>

在我将鼠标悬停在提示工具上或单击按钮之前，此按钮一直不可见。 scrollToTop 在顶部肯定是 0。当我调用 Javascript 命令时，该值确实发生了变化。

感觉好近，又好远。因此，我们将不胜感激。

Answer 1

我在我的组件中使用了这段代码。类似于 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(),
        );
 }`

在与屏幕交互之前，不会在不同的组件中读取 mat-drawer-content 的 scrollTop 值

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

angular

angular-material

ngrx

mat-drawer