在angular2上使用按钮进行水平滚动

npm install @angular/material @angular/cdk

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatTabsModule } from '@angular/material/tabs';

@NgModule({
  imports: [
    MatButtonModule,
    MatTabsModule
  ],
  exports: [
    MatButtonModule,
    MatTabsModule
  ]
})
export class MaterialModule { }

<div>
  <button mat-button (click)="scrollTo('tab1')">Tab 1</button>
  <button mat-button (click)="scrollTo('tab2')">Tab 2</button>
  <button mat-button (click)="scrollTo('tab3')">Tab 3</button>
  <button mat-button (click)="scrollTo('tab4')">Tab 4</button>
</div>

<mat-tab-group>
  <mat-tab label="Tab 1" id="tab1">
    Content for Tab 1
  </mat-tab>
  <mat-tab label="Tab 2" id="tab2">
    Content for Tab 2
  </mat-tab>
  <mat-tab label="Tab 3" id="tab3">
    Content for Tab 3
  </mat-tab>
  <mat-tab label="Tab 4" id="tab4">
    Content for Tab 4
  </mat-tab>
</mat-tab-group>

import { Component } from '@angular/core';

@Component({
  selector: 'app-scrollable-tabs',
  templateUrl: './scrollable-tabs.component.html',
  styleUrls: ['./scrollable-tabs.component.css']
})
export class ScrollableTabsComponent {
  scrollTo(tabId: string) {
    const element = document.getElementById(tabId);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }
}