要使用Angular和mat-tab-nav-bar来保持水平滚动，您可以使用router.navigate方法来切换选项卡，并使用ViewChild来获取mat-tab-nav-bar的引用。

首先，确保您已经安装并导入了Angular Material库和相关组件。

在HTML模板中，使用mat-tab-nav-bar和mat-tab组件来创建选项卡导航栏。例如：

  {{ tab.label }}

在组件类中，定义选项卡的路由和标签。例如：

import { Component, ViewChild } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.css']
})
export class TabsComponent {
  tabs = [
    { label: 'Tab 1', route: '/tab1' },
    { label: 'Tab 2', route: '/tab2' },
    { label: 'Tab 3', route: '/tab3' },
    // 更多选项卡...
  ];

  @ViewChild('tabNavBar') tabNavBar;

  constructor(private router: Router) { }

  navigateToTab(route: string) {
    this.router.navigate([route]);
    this.scrollToActiveTab();
  }

  scrollToActiveTab() {
    const activeTab = this.tabNavBar._activeLink.nativeElement;
    activeTab.scrollIntoView({ inline: 'center' });
  }
}

在上面的代码中，我们使用ViewChild装饰器来获取mat-tab-nav-bar的引用，并使用router.navigate方法来切换选项卡。然后，我们使用scrollIntoView方法将活动选项卡滚动到可见位置。

最后，在路由配置中，确保每个选项卡都有相应的路由定义。例如：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { Tab1Component } from './tab1/tab1.component';
import { Tab2Component } from './tab2/tab2.component';
import { Tab3Component } from './tab3/tab3.component';

const routes: Routes = [
  { path: 'tab1', component: Tab1Component },
  { path: 'tab2', component: Tab2Component },
  { path: 'tab3', component: Tab3Component },
  // 更多路由...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这样，当您点击选项卡时，就会切换到相应的路由，并且活动的选项卡会自动滚动到可见位置。

希望这可以帮助到您！