Angular Material可滚动表格箭头指示器与移动端友好滚动实现

需求匹配说明 #

以下方案完全覆盖三个核心要求：

• 滚动条不在可视区域时自动展示横向滚动提示
• 桌面端、移动端均提供便捷操作入口
• 兼容所有现代浏览器，无需适配IE，无额外第三方依赖

方案一：纯CSS+极少量原生JS实现（优先推荐） #

这个方案实现成本最低，性能最好，90%以上的业务场景都可以直接用。
核心逻辑是在滚动容器两侧通过伪元素生成渐变遮罩+箭头提示，根据滚动位置自动显隐对应侧的提示，不阻挡用户正常操作。

提示：指示器固定在容器可视区域的左右边缘，不管页面滚动到什么位置，只要表格容器在视口内，用户就能看到滚动提示，不需要滚动到表格底部找滚动条。

核心样式代码：

.table-scroll-wrap {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; /* 解决iOS端滚动卡顿问题 */
  cursor: grab; /* 拖拽滚动时可切换为grabbing */
}

/* 两侧渐变遮罩+箭头默认状态 */
.table-scroll-wrap::before,
.table-scroll-wrap::after {
  content: '';
  position: sticky;
  top: 0;
  height: 100%;
  width: 56px;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.2s ease;
}
.table-scroll-wrap::before {
  left: 0;
  float: left;
  background: linear-gradient(to right, #fff 20%, transparent);
}
.table-scroll-wrap::after {
  right: 0;
  float: right;
  background: linear-gradient(to left, #fff 20%, transparent);
}

/* 滚到对应边界时隐藏该侧提示 */
.table-scroll-wrap[data-scroll-start="true"]::before {
  opacity: 0;
}
.table-scroll-wrap[data-scroll-end="true"]::after {
  opacity: 0;
}

/* 箭头用内联SVG实现，无额外资源请求 */
.table-scroll-wrap[data-scroll-start="false"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
}
.table-scroll-wrap[data-scroll-end="false"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 12px) center;
}

/* 表格基础样式 */
.table-scroll-wrap table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
}

配套的状态检测JS代码（仅10行左右）：

const scrollContainer = document.querySelector('.table-scroll-wrap');
const updateScrollStatus = () => {
  const { scrollLeft, scrollWidth, clientWidth } = scrollContainer;
  scrollContainer.dataset.scrollStart = scrollLeft <= 1;
  scrollContainer.dataset.scrollEnd = scrollLeft >= scrollWidth - clientWidth - 1;
};
scrollContainer.addEventListener('scroll', updateScrollStatus);
window.addEventListener('resize', updateScrollStatus);
updateScrollStatus(); // 初始化执行

方案二：Angular原生指令实现（适合复杂交互场景） #

如果需要更丰富的交互（比如点击箭头滚动、鼠标拖拽滚动、滚轮横向滚动），可以直接封装成Angular属性指令，不需要引入任何第三方库。
核心指令代码：

import { Directive, ElementRef, HostListener, Renderer2, OnInit, OnDestroy } from '@angular/core';

@Directive({
  selector: '[appHorizontalScroll]'
})
export class HorizontalScrollDirective implements OnInit, OnDestroy {
  private resizeObserver!: ResizeObserver;
  private isDragging = false;
  private startX = 0;
  private scrollLeft = 0;

  constructor(private el: ElementRef<HTMLElement>, private renderer: Renderer2) {}

  ngOnInit() {
    this.resizeObserver = new ResizeObserver(() => this.updateScrollStatus());
    this.resizeObserver.observe(this.el.nativeElement);
    this.renderer.setAttribute(this.el.nativeElement, 'tabindex', '0'); // 支持键盘聚焦操作
    this.updateScrollStatus();
  }

  @HostListener('scroll')
  onScroll() {
    this.updateScrollStatus();
  }

  // 点击箭头滚动方法，模板里可直接绑定
  scroll(step: number) {
    this.el.nativeElement.scrollBy({ left: step, behavior: 'smooth' });
  }

  // 鼠标拖拽滚动支持
  @HostListener('mousedown', ['$event'])
  onMouseDown(e: MouseEvent) {
    this.isDragging = true;
    this.startX = e.pageX - this.el.nativeElement.offsetLeft;
    this.scrollLeft = this.el.nativeElement.scrollLeft;
    this.renderer.setStyle(this.el.nativeElement, 'cursor', 'grabbing');
  }

  @HostListener('mouseleave')
  @HostListener('mouseup')
  onMouseUp() {
    this.isDragging = false;
    this.renderer.setStyle(this.el.nativeElement, 'cursor', 'grab');
  }

  @HostListener('mousemove', ['$event'])
  onMouseMove(e: MouseEvent) {
    if (!this.isDragging) return;
    e.preventDefault();
    const x = e.pageX - this.el.nativeElement.offsetLeft;
    const walk = (x - this.startX) * 1.2;
    this.el.nativeElement.scrollLeft = this.scrollLeft - walk;
  }

  // 滚轮横向滚动支持
  @HostListener('wheel', ['$event'])
  onWheel(e: WheelEvent) {
    if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
      e.preventDefault();
      this.el.nativeElement.scrollLeft += e.deltaY;
    }
  }

  private updateScrollStatus() {
    const { scrollLeft, scrollWidth, clientWidth } = this.el.nativeElement;
    this.renderer.setAttribute(this.el.nativeElement, 'data-scroll-start', scrollLeft <= 1 ? 'true' : 'false');
    this.renderer.setAttribute(this.el.nativeElement, 'data-scroll-end', scrollLeft >= scrollWidth - clientWidth - 1 ? 'true' : 'false');
  }

  ngOnDestroy() {
    this.resizeObserver?.disconnect();
  }
}

模板中使用时直接给容器加指令，左右箭头可以放在容器内绑定scroll方法即可，样式和纯CSS方案通用。

容易遗漏的UX设计要点 #

• 不要隐藏原生滚动条：箭头、渐变只是补充提示，保留原生滚动条才能符合用户的操作预期，不要为了视觉美观移除滚动条
• 优先用渐变提示代替突兀的箭头：半透明边缘渐变的提示感更自然，不会遮挡表格内容，箭头可以作为渐变的补充元素
• 做好滚动冲突处理：添加overscroll-behavior-x: contain，避免表格滚动到边界时触发浏览器的后退手势、页面横向滚动等异常行为
• 支持键盘操作：给滚动容器加tabindex="0"，用户聚焦后可以直接用左右方向键滚动，满足无障碍要求
• 移动端保留原生触摸体验：不要用JS拦截移动端的触摸滑动事件，原生滑动的手感和响应速度远好于JS模拟
• 不要强制滚动对齐：普通数据表格不要开启强制scroll-snap对齐，否则用户自由浏览数据时会被强制吸附到固定位置，影响浏览效率

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