Question

我有这个由Id引用的元素：

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

当浏览器到达元素的底部时，我需要监听。

如何实现这一目标？

Answer 1

您可以通过以下方式检查用户是否已滚动到底部...

Html文件

<div (scroll)="onScroll($event)">
    ...
    ...
</div>

打字稿文件

import { Component, HostListener } from '@angular/core';
    ...
    ...
@HostListener('scroll', ['$event'])
onScroll(event: any) {
    // visible height + pixel scrolled >= total height 
    if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight) {
      console.log("End");
    }
}

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。

Answer 3

您可以使用跟踪容器滚动事件的observable来执行此操作。

或者您可以为正在侦听滚动事件的组件创建主机侦听器。请看一下这个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 4

我现在正在字面上进行研究，发现这是“ 我”最通用的用例。

正如 YASH DAVE 所述，使用主机监听器是Angular' onScroll '实现的最佳选择。但是，“ 窗口：滚动”不适用于我的用例（插入仪表板中的表）。所以我很幸运这样做

@HostListener('scroll', ['$event.target'])
 onScroll(elem){
  if(( elem.offsetHeight + elem.scrollTop) >=  elem.scrollHeight) {
     console.log("It's Lit");
  }
}'

CSS：

:host {
     display: block;
     max-height: 700px;
     width: 100%;
     overflow-y: scroll;
     scroll-behavior: auto;
 }

说明：

基本上，通用“滚动”侦听主机元素上发生的滚动事件。
通过 $ event.target 将触发滚动事件的元素引用传递给我的onScroll（elem）方法
然后，我获取元素引用，并确定offsetHeight和ScrollTop是否大于scrollHeight （是的，这与其他人实现此方法的方式不同） reference： { {3}}
然后繁荣，享受。
注意：如果您只需要一个，而我对此压力还不够，简单的解决方案只需添加（滚动）事件特定元素上的监听器

另外，请查看mVChr's Implementation ，以了解offsetHeight，clientHeight，scrollHeight。

Answer 5

试试这个，它会起作用

@HostListener('body:scroll', ['$event'])

如何检测滚动到html元素的底部

5 个答案: