Intersection Observerを使って表示されたときに処理をする

あるアイテムが表示されたときに色々したい。例えば

• 画像が画面上に表示されたら取得して表示
• リスト要素の表示されていないときの非表示等(バーチャルスクロール)
• リスト要素の最後の要素が表示されたときにデータを取得する(Infinite Scroll)

https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API

Angular component

import { Component, OnInit, AfterViewInit, ElementRef, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'item-intersection-observer',
  templateUrl: './item-intersection-observer.component.html',
  styleUrls: ['./item-intersection-observer.component.scss']
})
export class ItemIntersectionObserverComponent implements OnInit, AfterViewInit {
  @Output() viewEvent:EventEmitter<{}> = new EventEmitter<{}>();

  constructor(
    private elementRef:ElementRef
  ) { }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    let observer =
      new IntersectionObserver(
        (entries)=>{
          entries.forEach((entry: any) => {
            if(!entry.isIntersecting) return;
            this.viewEvent.emit();
          }
        )
      });
    observer.observe(this.elementRef.nativeElement);
  }
}

使用例

<item-intersection-observer (viewEvent)="onView()"></item-intersection-observer>

onView(){
  ...
}

polyfill

https://caniuse.com/intersectionobserver
対応ブラウザ次第ではあるけどpolyfillを入れることで未対応ブラウザでも使用できる。

npm install intersection-observer

import 'intersection-observer';