javascript - Angular 2 : Understand if DOM element is within viewport

Question

基本上我想用@input 值标记一个dom元素，即'aos'

<div aos>my</div>

然后，例如，只要这样的 div 在我的视口(viewport)内，就做一个控制台日志。
如何做到这一点？我假设使用 Angular 的 Scrolling Dispatcher，但我如何理解这样的 div 在视口(viewport)中？

Answer 1

LIVE DEMO
您可以使用 IntersectionObserver这样做。它是一种原生浏览器 API，而不是 Angular 的。一种方法是构建一个指令，当应用于任何元素时，它会告诉您该元素是可见/隐藏的。你可以查看它的API here .
基本上你必须在这个指令中做的是:

注入(inject)指令的父级(ElemenRef)

使用 IntersectionObserver 观察父级

@Directive({selector: "[enterTheViewportNotifier]"})
export class EnterTheViewportNotifierDirective implements AfterViewInit, OnDestroy {
  @Output() visibilityChange = new EventEmitter<'VISIBLE' | 'HIDDEN'>();
  private _observer: IntersectionObserver;

  constructor(@Host() private _elementRef: ElementRef) {}

  ngAfterViewInit(): void {
    const options = {root: null,rootMargin: "0px",threshold: 0.0};
    this._observer = new IntersectionObserver(this._callback, options);
    this._observer.observe(this._elementRef.nativeElement);
  }

  ngOnDestroy() {this._observer.disconnect();}

  private _callback = (entries, observer) => {
    entries.forEach(entry => 
        this.visibilityChange.emit(entry.isIntersecting ? 'VISIBLE' : 'HIDDEN'));
  };
}

您可以像这样使用它( _visibilityChangeHandler 将在每次下面的 div 进入/离开视口(viewport)时被调用，并带有一条消息):

<div (visibilityChange)="_visibilityChangeHandler($event)"
     enterTheViewportNotifier>
</div>