Angular Material表格左右悬停箭头按钮横向滚动实现求助

需求说明 #

使用Angular Material表格展示大量列，需要在表格容器左右两侧悬停时显示「滚动到开头」「滚动到末尾」按钮，点击按钮可快速滚动至表格两端。

实现思路与步骤 #

1. 构建基础布局与样式 #

将Angular Material表格包裹在可横向滚动的容器内，在容器两侧添加悬浮按钮，默认隐藏，鼠标悬停容器时显示按钮。

HTML结构示例

<div class="table-scroll-container" #scrollContainer>
  <!-- 左侧滚动按钮 -->
  <button mat-icon-button class="scroll-btn scroll-left-btn" (click)="scrollToStart()">
    <mat-icon>chevron_left</mat-icon>
  </button>

  <!-- Angular Material表格 -->
  <table mat-table [dataSource]="dataSource">
    <!-- 表格列定义示例 -->
    <ng-container matColumnDef="column1">
      <th mat-header-cell *matHeaderCellDef>列1</th>
      <td mat-cell *matCellDef="let element">{{element.column1}}</td>
    </ng-container>
    <!-- 更多列定义... -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <!-- 右侧滚动按钮 -->
  <button mat-icon-button class="scroll-btn scroll-right-btn" (click)="scrollToEnd()">
    <mat-icon>chevron_right</mat-icon>
  </button>
</div>

CSS样式示例

.table-scroll-container {
  position: relative;
  overflow-x: auto;
  width: 100%;
}

.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
  background-color: rgba(255,255,255,0.9);
}

.table-scroll-container:hover .scroll-btn {
  opacity: 1;
}

.scroll-left-btn {
  left: 10px;
}

.scroll-right-btn {
  right: 10px;
}

/* 滚动到两端时隐藏对应按钮 */
.scroll-btn.hidden {
  opacity: 0 !important;
  pointer-events: none;
}

2. 实现滚动逻辑与状态控制 #

在组件类中获取滚动容器的DOM元素，编写滚动方法，并监听容器滚动事件更新按钮显示状态。

组件类代码示例

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-wide-table',
  templateUrl: './wide-table.component.html',
  styleUrls: ['./wide-table.component.css']
})
export class WideTableComponent implements AfterViewInit {
  displayedColumns = ['column1', 'column2', ...]; // 替换为你的列名数组
  dataSource = new MatTableDataSource(/* 传入你的表格数据 */);

  @ViewChild('scrollContainer') scrollContainer!: ElementRef<HTMLDivElement>;

  ngAfterViewInit(): void {
    // 监听滚动事件，更新按钮状态
    this.scrollContainer.nativeElement.addEventListener('scroll', () => {
      this.updateScrollButtons();
    });
    // 初始化按钮状态
    this.updateScrollButtons();
  }

  // 滚动到表格开头
  scrollToStart(): void {
    this.scrollContainer.nativeElement.scrollTo({
      left: 0,
      behavior: 'smooth'
    });
  }

  // 滚动到表格末尾
  scrollToEnd(): void {
    const container = this.scrollContainer.nativeElement;
    container.scrollTo({
      left: container.scrollWidth - container.clientWidth,
      behavior: 'smooth'
    });
  }

  // 更新按钮显示状态
  private updateScrollButtons(): void {
    const container = this.scrollContainer.nativeElement;
    const leftBtn = document.querySelector('.scroll-left-btn') as HTMLElement;
    const rightBtn = document.querySelector('.scroll-right-btn') as HTMLElement;

    // 滚动到最左侧时隐藏左按钮
    leftBtn.classList.toggle('hidden', container.scrollLeft <= 0);
    // 滚动到最右侧时隐藏右按钮
    rightBtn.classList.toggle('hidden', container.scrollLeft >= container.scrollWidth - container.clientWidth);
  }
}

3. 优化交互体验 #

• 平滑滚动：通过scrollTo方法的behavior: 'smooth'参数实现滚动动画，提升用户体验
• 样式统一：使用Angular Material的mat-icon-button和mat-icon组件，保持与表格风格一致
• 响应式适配：确保滚动容器在不同屏幕尺寸下正常工作，按钮不会遮挡表格内容

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