获取 Angular 组件的滚动位置答案

【问题标题】：Getting the scroll position for an Angular component获取 Angular 组件的滚动位置
【发布时间】：2019-12-18 07:18:58
【问题描述】：

如何使用 fromEvent 获取组件的滚动位置？

我用它来获取鼠标位置，如何从顶部位置滚动？

this.mouseMoveSubscription = fromEvent(this.elementRef.nativeElement, 'mousemove')
                  .subscribe((e: MouseEvent) => {...});

这不起作用：

ngOnInit() {
    this.scrollSubscription = fromEvent(this.elementRef.nativeElement, 'scroll')
                  .subscribe((e: Scroll) => {
                    console.log(e.position);
                  });

  }

也没有为此触发任何事件（来自：answer）：

@HostListener('scroll', ['$event']) // for scroll events of the current element
onScroll(event) {
  ...
}

【问题讨论】：

你的元素有滚动条吗？尝试订阅有滚动条的元素，例如：fromEvent(document.body, 'scroll')。
它有一个滚动条，我需要获取组件的滚动位置而不是没有滚动条的窗口

标签： angular

【解决方案1】：

您似乎只是在错误的事件属性中寻找位置。

fromEvent(this.elementRef.nativeElement,'scroll')
      .subscribe((e: Event) => console.log({
        scrollPosition: e.target['scrollTop']
        }));

看看这个demo。

【讨论】：