javascript - Angular 检查滚动是手动触发还是从脚本触发

Question

我正在使用 Angular 7，并且我有一个指令可以监听元素的滚动。问题是，我希望指令仅响应手动滚动，并忽略使用 element.scrollTop = x 完成的编程滚动。该指令包含一个滚动监听器，如下所示:

@HostListener('scroll', ['$event'])
  onScroll($event) {
  }

在我的代码中的一个地方，我设置了一个如上所述的编程式滚动顶部，并且监听器捕获了一个事件。我试图在 $event 上找到一个属性来指示该事件是否是手动的，但找不到。我错过了吗？或者也许我可以以某种方式触发普通 javascript 中的自定义事件，该事件将包含此类指示(我知道在 jQuery 中你可以做到这一点，但我在这里不使用 jQuery...)。谢谢。

Answer 1

只需添加一个标志并将其设置为 false，然后再手动滚动即可。

不要忘记在滚动处理程序中将标志设置回 true

private handleScroll = true;

@HostListener('scroll', ['$event'])
onScroll($event) {
  if (!this.handleScroll) {
    this.handleScroll = true;
    return;
  }
}

public manualScroller() {
  this.handleScroll = false;

  this.element.scrollTop = 100;
}