Angular13中未触发ScrollDispatcher滚动事件前调用scrollTo()失效求助

问题核心原因 #

你通过document获取的元素虽然和CDK返回的是同一个，但CDK的ScrollDispatcher需要先注册滚动容器，只有被CDK管理的滚动容器，调用其scrollTo才能正确触发滚动行为。默认情况下ScrollDispatcher.scrolled()只有在滚动事件触发后才会注册容器，所以需要主动获取并注册滚动容器，而非被动等待滚动事件。

解决方案步骤 #

1. 确保滚动容器添加cdkScrollable指令

在mat-tab内容模板中，给滚动容器加上cdkScrollable（这是CDK滚动系统识别容器的前提）：

<mat-tab-group #tabGroup>
  <mat-tab label="标签1">
    <div class="scroll-container-style" cdkScrollable>
      <!-- 内容元素 -->
      <div id="target1">目标内容1</div>
    </div>
  </mat-tab>
  <mat-tab label="标签2">
    <div class="scroll-container-style" cdkScrollable>
      <!-- 内容元素 -->
      <div id="target2">目标内容2</div>
    </div>
  </mat-tab>
</mat-tab-group>

2. 主动获取CdkScrollable实例

通过ViewChild结合tab切换事件，在tab激活后获取对应滚动容器实例，无需依赖scrollDispatcher.scrolled()：

import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { CdkScrollable, ScrollDispatcher } from '@angular/cdk/scrolling';
import { MatTabChangeEvent, MatTabGroup } from '@angular/material/tabs';
import { Subscription } from 'rxjs';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit, OnDestroy {
  private scrollingNativeElement: Element;
  private subscription: Subscription = new Subscription();
  @ViewChild(MatTabGroup) tabGroup: MatTabGroup;
  // 动态获取tab内的滚动容器，static设为false
  @ViewChild(CdkScrollable, { static: false }) private scrollable: CdkScrollable;

  constructor(private scrollDispatcher: ScrollDispatcher) {}

  ngOnInit(): void {
    // 监听tab切换，确保切换后获取当前tab的滚动容器
    this.subscription.add(
      this.tabGroup.selectedTabChange.subscribe((event: MatTabChangeEvent) => {
        // 延迟一小段时间确保tab内容渲染完成
        setTimeout(() => {
          if (this.scrollable) {
            this.scrollingNativeElement = this.scrollable.getElementRef().nativeElement;
          }
        }, 100);
      })
    );

    // 初始化时获取默认激活tab的滚动容器
    setTimeout(() => {
      if (this.scrollable) {
        this.scrollingNativeElement = this.scrollable.getElementRef().nativeElement;
      }
    }, 100);
  }

  public onClick(elementId: string): void {
    if (!this.scrollingNativeElement) return;

    const element: HTMLElement = document.getElementById(elementId);
    if (!element) return;

    // 修正滚动位置计算：从视口坐标转换为滚动容器内部坐标
    const containerRect = this.scrollingNativeElement.getBoundingClientRect();
    const elementRect = element.getBoundingClientRect();
    const relativeY = elementRect.top - containerRect.top - 110 + this.scrollingNativeElement.scrollTop;

    this.scrollingNativeElement.scrollTo({ top: relativeY, left: 0 });
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

3. 更简洁的替代方案：直接使用CDK内置方法

CdkScrollable自身提供了scrollToElement方法，可自动计算滚动位置，无需手动转换坐标：

public onClick(elementId: string): void {
  if (!this.scrollable) return;

  const element: HTMLElement = document.getElementById(elementId);
  if (!element) return;

  // 直接调用CDK方法，offset参数用来调整偏移量
  this.scrollable.scrollToElement(element, { offset: -110 });
}

为什么之前document获取的元素scrollTo无效？ #

虽然元素引用相同，但未被CDK注册的滚动容器，在mat-tab切换后可能处于未激活状态，或Angular变更检测未完成，导致scrollTo调用时容器的滚动上下文未就绪。通过CdkScrollable获取的实例已被ScrollDispatcher管理，确保滚动行为在正确上下文执行。

内容的提问来源于stack exchange，提问作者doubleplusgood1984