Angular 7如何区分手动触发与脚本触发的滚动事件？

这个问题我之前也碰到过，原生的scroll事件确实没有内置属性能直接区分是用户手动触发还是通过代码设置scrollTop导致的，不过我们可以通过几个可靠的方法来实现需求：

方案一：添加程序化滚动标记（推荐） #

如果所有的程序化滚动操作都在你的可控范围内，这是最简单有效的方法。我们可以在指令内维护一个状态变量，标记当前是否是程序化滚动：

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

@Directive({
  selector: '[appScrollListener]'
})
export class ScrollListenerDirective {
  private isProgrammaticScroll = false;

  constructor(private elementRef: ElementRef) {}

  // 对外暴露的程序化设置scrollTop方法（如果是在指令外设置，也可以把这个标记变量改成可访问的）
  setScrollTop(value: number): void {
    this.isProgrammaticScroll = true;
    this.elementRef.nativeElement.scrollTop = value;
    // 用requestAnimationFrame确保在scroll事件触发后重置标记
    requestAnimationFrame(() => {
      this.isProgrammaticScroll = false;
    });
  }

  @HostListener('scroll', ['$event'])
  onScroll($event: Event): void {
    if (this.isProgrammaticScroll) {
      console.log('忽略程序化滚动');
      return;
    }
    console.log('处理手动滚动:', $event);
    // 这里写你的手动滚动逻辑
  }
}

原理是：设置scrollTop会同步触发scroll事件，我们在触发前标记状态，事件触发后立即重置，这样就能精准过滤掉程序化滚动。

方案二：监听手动触发的交互事件 #

如果无法控制所有程序化滚动的代码，可以通过监听用户手动触发滚动的源头事件（比如滚轮、触摸、键盘操作）来标记手动滚动：

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appScrollListener]'
})
export class ScrollListenerDirective {
  private isManualScroll = false;

  @HostListener('wheel')
  onWheel(): void {
    this.isManualScroll = true;
  }

  @HostListener('touchstart')
  onTouchStart(): void {
    this.isManualScroll = true;
  }

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent): void {
    // 监听可能触发滚动的按键：上下箭头、空格
    const scrollKeys = [38, 40, 32];
    if (scrollKeys.includes(event.keyCode)) {
      this.isManualScroll = true;
    }
  }

  @HostListener('scroll', ['$event'])
  onScroll($event: Event): void {
    if (this.isManualScroll) {
      console.log('处理手动滚动:', $event);
      this.isManualScroll = false; // 重置标记
    } else {
      console.log('忽略程序化滚动');
    }
  }
}

注意：这个方案有小缺陷，比如用户通过鼠标拖动滚动条的操作无法完全覆盖（不同浏览器的滚动条DOM结构不一致），但能覆盖绝大多数手动场景。

关于自定义事件的补充 #

你提到的自定义事件方案，原生JS也可以实现，但需要修改所有程序化滚动的逻辑——不再直接设置scrollTop，而是触发自定义事件，指令只监听自定义事件和原生scroll事件来区分：

// 程序化滚动时触发自定义事件
this.elementRef.nativeElement.dispatchEvent(
  new CustomEvent('programmatic-scroll', { detail: { scrollTop: 100 } })
);

// 指令内监听
@HostListener('programmatic-scroll', ['$event'])
onProgrammaticScroll(event: CustomEvent): void {
  console.log('处理程序化滚动:', event.detail.scrollTop);
}

@HostListener('scroll', ['$event'])
onManualScroll($event: Event): void {
  console.log('处理手动滚动:', $event);
}

这个方案需要改动现有代码，适合重构场景，不是紧急需求的话优先级低于前两个方案。

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