我如何检测滚动到html元素

Question

的底部有这个元素是我凭身份证引用：

let infiniteScrollElement = document.getElementById('th-infinite-scroll-tracker'); 

我需要在浏览器已经达到了元件的底部听。

如何实现这一目标？

Answer 1

你可以用跟踪你的容器的滚动事件的可观察项来做到这一点。

或者您可以为正在侦听滚动事件的组件创建主机侦听器。请看看这个SO question。 （我还没有与主机监听测试，但应工作）

下面的代码添加到您的组件可观察的方法（我已经复制一些代码从这个blog post ）：

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'); 
     } 
    }); 
    } 

更新

另一种方式，也许最好是创建为您跟踪逻辑指令。然后，您可以轻松使用HostListener绑定到滚动事件。

打字稿代码：

import { 
    Directive, HostListener 
} 
from '@angular/core'; 

@Directive({ 
    selector: '[scrollTracker]' 
}) 
export class ScrollTrackerDirective { 
    @HostListener('scroll', ['$event']); 

    onScroll(event) { 
    // do tracking 
    // console.log('scrolled', event.target.scrollTop); 
    // Listen to click events in the component 
    let tracker = event.target; 

    let limit = tracker.scrollHeight - tracker.clientHeight; 
    console.log(event.target.scrollTop, limit); 
    if (event.target.scrollTop === limit) { 
     alert('end reached'); 
    } 
    } 

    constructor() {} 
} 

标记在你的组件（添加您的指令）

<div id="th-infinite-scroll-tracker" style="overflow-y:scroll; height: 500px;" scrollTracker> 
    .... your container with scrollbar ... 
</div> 

Answer 2

我认为所有你想要做的就是检测滚动的位置。

@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 
} 
} 

另外不要忘记从@ angular/core导入HostListener。

（PS：我知道我迟到了在回复，但它可以帮助他人）