let infiniteScrollElement = document.getElementById('th-infinite-scroll-tracker');
当浏览器到达元素的底部时我需要监听 .
怎么做到这一点?
3 回答
12
我认为你想要做的就是检测滚动的位置 .
@HostListener("window:scroll", ["$event"])
onWindowScroll() {
//In chrome and some browser scroll is given to body tag
let pos = (document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.offsetHeight;
let max = document.documentElement.scrollHeight;
// pos/max will give you the distance between scroll bottom and and bottom of screen in percentage.
if(pos == max ) {
//Do your action here
}
}
ngOnInit() {
/*
* Create the observable from an event, in this case, the window scroll event
* then map each event so we can get a new value from it
* i.e. over time, we are just dealing with a collection:
* (map [e1, e2, e3, ...]) -> [t1, t2, t3, ...]
*/
let tracker = document.getElementById('th-infinite-scroll-tracker');
let windowYOffsetObservable = Observable.fromEvent(tracker, 'scroll').map(() => {
// I don't actually care about the event, I just need to get the window offset (scroll position)
return tracker.scrollTop;
});
// subscribe to our Observable so that for each new item, our callback runs
// this is our event handler
let scrollSubscription = windowYOffsetObservable.subscribe((scrollPos) => {
let limit = tracker.scrollHeight - tracker.clientHeight;
console.log(scrollPos, limit);
if (scrollPos === limit) {
alert('end reached');
}
});
}
3 回答
我认为你想要做的就是检测滚动的位置 .
另外不要忘记从@ angular / core导入HostListener .
您可以通过以下方式检查用户是否已滚动到底部...
Html file
typescript file
您可以使用跟踪容器滚动事件的observable来执行此操作 .
或者,您可以为正在侦听滚动事件的组件创建主机侦听器 . 请看一下SO question . (我没有用主机监听器测试它,但这应该有效 . )
将以下代码添加到组件中以实现可观察的方法(我已经从blog post复制了一些代码 . ):
Update
另一种方式,也许最好的方法是为您的跟踪逻辑创建一个指令 . 然后,您可以轻松地使用
HostListener
绑定到scroll事件 .打字稿代码:
组件中的标记(添加指令)