Angular6容器滚动条监听

ngx-scroll-event

用于Angular2+监听滚动条的指令和事件

Install

  • npm
1
$ npm install ngx-scroll-event --save
  • yarn
1
$ yarn add ngx-scroll-event

使用

1
2
3
4
5
6
7
8
9
10
11
// app.module.ts
import { ScrollEventModule } from 'ngx-scroll-event';

@NgModule({
imports: [
...,
ScrollEventModule,
...,
]
})
export class AppModule { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// app.awesome.component.ts

...
import { ScrollEvent } from 'ngx-scroll-event';
...

@Component({
...
template: `...
<div detect-scroll (onScroll)="handleScroll($event)" [bottomOffset]="200" [topOffset]="200" >
<div>Bla bla bla</div>
<div>Bla bla bla</div>
<div>Bla bla bla</div>
<div>Bla bla bla</div>
<div>Bla bla bla</div>
<div>Bla bla bla</div>
<div>Bla bla bla</div>
<div>Bla bla bla</div>
<div>Bla bla bla</div>
<div>
...`,
})
export class AwesomeComponent {
public handleScroll(event: ScrollEvent) {
console.log('scroll occurred', event.originalEvent);
if (event.isReachingBottom) {
console.log(`the user is reaching the bottom`);
}
if (event.isReachingTop) {
console.log(`the user is reaching the top`);
}
if (event.isWindowEvent) {
console.log(`This event is fired on Window not on an element.`);
}

}
}