監視するターゲットがルートの境界線と交差する度にコールバックが呼び出される。

root

'null': ブラウザのビューポート
要素を指定：　その要素内でターゲットが見えるか見えないかを確認できる

rootMargin

ルート範囲のサイズを拡大・縮小させる量。デフォルトは0。
"10px 20px 30px 40px"や"-50% 0"など、CSSと同じように指定できる。

threshold

'1'：　全て見えた状態で通知。
'0'：　1pxでも見えたら通知。

コールバックで受け取れるもの

• 入力引数として交差したすべての閾値を示す IntersectionObserverEntry オブジェクトの配列
• 参照として IntersectionObserver オブジェクト自身

intersectionCallback(entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // do something
    }
  });
}

ターゲットがルートより上か下か（スクロール前か後か）を知るには、下のように判定すればOK

const isAbove = e.boundingClientRect.y <= e.rootBounds.y;

IE11のpolyfill

https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver

今日の作業内容のgit

https://github.com/Fielsyuka/scroll-effect