ng-perfect-scrollbar中从顶部滚动的距离

时间:2018-08-24 09:33:30

标签: angular scroll scrollbar

我想订阅ng-perfect-scrollbar上的滚动事件以跟踪滚动距离。像这样:

<perfect-scrollbar (onScroll)='distanceFromTop => console.log(distanceFromTop )'>
   <router-outlet></router-outlet>
</perfect-scrollbar>

我尝试过的方法: 我向滚动条添加了指令,并尝试获取本机元素并将onscroll设置为我的函数:

<perfect-scrollbar #mainScrollbar>
   <router-outlet></router-outlet>
</perfect-scrollbar>

@ViewChild('mainScrollbar') private mainScrollbar: 
ElementRef<HTMLElement>;

ngAfterContentInit() {
   console.log(this.mainScrollbar.nativeElement);
   this.mainScrollbar.nativeElement.onscroll = e => console.log(e);
}

我在控制台中收到以下消息:

  

未定义   TypeError:无法读取未定义的属性“ nativeElement”

不必使用@ViewChild来回答我的问题,我只需要一个记录滚动距离的有效示例。

1 个答案:

答案 0 :(得分:0)

对于其他可能对答案感兴趣的人,在深入研究实现之后,我找到了解决方案:

1)获取对组件的引用,如demo app

@ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;

2)从组件引用中获取指令引用:

this.componentRef.directiveRef

3)现在您可以在指令引用上调用位置:

console.log(this.componentRef.directiveRef.position(true));

4)要在用户每次滚动时获得滚动距离,请使用带有回调函数的指令,例如:(psScrollY)或(psScrollX),该指令调用this.componentRef.directiveRef.position(true)