Angular自定义Tabs左右滚动时scrollLeft值不更新问题求助

问题核心 #

你遇到的问题根源有两个：

1. 平滑滚动（behavior: 'smooth'）是异步操作，调用scrollTo后不会立刻完成，同步读取scrollLeft只能拿到旧值
2. 组件使用OnPush变更检测策略，异步滚动完成后的DOM变化不会自动触发Angular的变更检测

具体实现步骤 #

1. 新增滚动状态变量与更新方法

在组件类里定义控制箭头禁用状态的变量，并实现更新逻辑：

import { Component, ElementRef, ViewChild, ChangeDetectorRef, AfterViewInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-custom-tabs',
  templateUrl: './custom-tabs.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CustomTabsComponent implements AfterViewInit, OnDestroy {
  @ViewChild('scroll') scroll!: ElementRef<HTMLElement>;
  isOverflow = false;
  canScrollLeft = false;
  canScrollRight = false;

  constructor(private changeDetectorRef: ChangeDetectorRef) {}

  ngAfterViewInit(): void {
    // 监听滚动事件，实时更新箭头状态
    this.scroll.nativeElement.addEventListener('scroll', this.onScroll.bind(this));
    // 监听窗口 resize，更新溢出状态
    window.addEventListener('resize', this.isScrollOverflow.bind(this));
    // 初始化状态
    this.isScrollOverflow();
    this.updateArrowStates();
  }

  ngOnDestroy(): void {
    // 移除监听，避免内存泄漏
    this.scroll.nativeElement.removeEventListener('scroll', this.onScroll.bind(this));
    window.removeEventListener('resize', this.isScrollOverflow.bind(this));
  }

  isScrollOverflow(): void {
    const element = this.scroll.nativeElement;
    this.isOverflow = element.scrollWidth > element.offsetWidth;
    // 溢出状态变化后，重新检查箭头可用性
    this.updateArrowStates();
    this.changeDetectorRef.markForCheck();
  }

  onScroll(): void {
    this.updateArrowStates();
    // 通知Angular检查变更（OnPush策略必需）
    this.changeDetectorRef.markForCheck();
  }

  updateArrowStates(): void {
    const element = this.scroll.nativeElement;
    this.canScrollLeft = element.scrollLeft > 0;
    // 判断是否滚动到最右侧：scrollLeft + 容器宽度 >= 内容总宽度
    this.canScrollRight = element.scrollLeft + element.offsetWidth < element.scrollWidth;
  }

  scrollRight(): void {
    const element = this.scroll.nativeElement;
    element.scrollTo({ left: element.scrollLeft + 100, behavior: 'smooth' });
  }

  scrollLeft(): void {
    const element = this.scroll.nativeElement;
    element.scrollTo({ left: element.scrollLeft - 100, behavior: 'smooth' });
  }
}

2. 修改模板，绑定箭头禁用状态

更新HTML，根据状态控制箭头的显示与禁用：

<button *ngIf="isOverflow" (click)="scrollLeft()" [disabled]="!canScrollLeft">Left</button>
<section #scroll>
   <div class="item">Item 1</div>
   <div class="item">Item 2</div>
   <div class="item">Item 3</div>
   <div class="item">Item 4</div>
</section>
<button *ngIf="isOverflow" (click)="scrollRight()" [disabled]="!canScrollRight">Right</button>

关键说明 #

• 通过监听DOM的scroll事件，能实时获取最新的scrollLeft值，确保箭头状态准确
• 在scroll和resize事件回调中调用markForCheck()，触发OnPush策略下的变更检测，让视图同步更新
• 移除了原方法中同步读取scrollLeft的逻辑，转而依赖滚动事件的异步回调，避免了旧值问题
• 添加了组件销毁时的监听移除逻辑，防止内存泄漏

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