Intersection Observer API

目的：監控目標元素在父元素可視範圍內的行為。

應用

• Lazy loading

• Infinite Scrolling

• 計算使用者在目標元素的停留時間

• 淡入淡出動畫

基本語法：

const callback = (entries, observer) => {
  // 會在被觀察的子元素超過指定的 threshold 值被呼叫
  // entries 為一組 IntersectionObserverEntry objects 的 array
  entries.forEach(entry => {
    //...
  });
};

const options = {
  // 指定父元素，沒有指定的話，預設是 document
  root: null,

  // 改變父元素的邊界互動偏移量
  rootMargin: '0px',

  // 指定子元素在父元素的可見範圍條件
  // 剛好出現的那一瞬間或是完整離開時為0, 而完整出現為1, 出現一半為0.5 
  threshold: 0.5,
};

// 建立 observer
const observer = new IntersectionObserver(callback, options);

// 指定監控的子元素
const targetElement = document.getElementById('target-element');

// 監控子元素
// 一個 observer 可以監控多個子元素
observer.observe(targetElement);

reference：

• https://developer.mozilla.org/enUS/docs/Web/API/Intersection_Observer_API

• https://www.youtube.com/watchv=NZKUirTtxcg&ab_channel=WebDevSimplified