我想订阅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
来回答我的问题,我只需要一个记录滚动距离的有效示例。
答案 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)