Question

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

Answer 1

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

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)

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

1 个答案: