获取 Angular 组件的滚动位置

Posted 2023-03-06

【中文标题】获取 Angular 组件的滚动位置

【英文标题】：Getting the scroll position for an Angular component

【发布时间】：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')。

它有一个滚动条，我需要获取组件的滚动位置而不是没有滚动条的窗口

【参考方案1】：

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

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

看看这个demo。