Intersection ObserverのrootMarginには負の値を指定できる

tl; dr

• IntersectionObserverのrootMarginオプションに'-50% 0px -50% 0px'とか指定できる
• 要素が画面の真ん中に来たときにイベント発火！とかできる

Google Chrome Version 79で確認しています。

Intersection Observerとは

Intersection Observer API - Web API | MDN

JavaScriptにおいてDOM要素の交差を監視することができるAPIです。
いままでonscrollなどで実装していた画像の遅延読み込みなどが簡単、効率的に実現できます。

使い方としてはこんな感じ

var intersectionObserver = new IntersectionObserver(function(entries) {
  // intersectionRatio が 0 の場合、対象がビューの外にあるので、
  // 何かをする必要はありません。
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log('Loaded new items');
}, {
  root: document.querySelector('#root'),
  rootMargin: '0px 0px 0px 0px',
  threshold: 1.0
});
// 監視を開始
intersectionObserver.observe(document.querySelector('.scrollerFooter'));

(IntersectionObserver - Web API | MDN の例にオプションを追記)

オプションは3つありますが、ここで注目したいのはrootMarginです。MDNの説明では

交差状態を計算するときに root の バウンディングボックス に適用されるオフセットの矩形で、計算のために root を効果的に縮小または拡大させます。

というもので、画面内に要素が入ったときではなく、そのちょっと外側に入ったときから早めにイベントを起こさせたい、みたいなのが主なユースケースだと思います。

今回このAPIで遊んでいるうちに、rootMarginに負の値が取れることに気づきました。

何ができるか

負の値を指定することで、画面の中央に来たときにイベントを発火させることができます。
ユースケースとしては、長い記事やBBS系のサイトで「ここまで読んだ」的な機能に使えるのでは無いでしょうか。
(画面の中央に来たら読んだよね！という前提)

実際にCodePenでサンプルを作ってみました。
ボックス内をスクロールすると、真ん中の線を超えたときに色が変わります。

See the Pen Intersection observer with negative rootMargin by diaphragm (@diaphragm) on CodePen.

問題点

• IntersectionObserver自体がまだ実験的なAPI
• 仕様上rootMarginに負の値を渡していいのか未調査(MDNの説明に縮小って書いてあるから意図的だとは思う)