0

整个目标是滚动到某个页面的顶部按钮。实际滚动有效，但该按钮未显示在页面滚动上。

最初，我使用纯 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 命令时，该值确实会发生变化。

感觉那么近，却又那么远。所以任何帮助将不胜感激。

4

1 回答 1

0

我在我的组件中使用了这段代码。类似于如何检测 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(),
        );
 }`
于 2021-10-08T23:18:45.193 回答