intersection-observer-overview.js

// 響鈴條件：設定和控制在哪些情況下，呼叫 callback 函式
let options = {}

// 條件達成做什麼：符合設定條件下，目標進入或離開 viewport 時觸發此 callback 函式
let callback = (entries, observer) => {
  // entries 能拿到所有目標元素進出(intersect)變化的資訊
  entries.forEach(entry => {
    // 取得每個 entry 資訊做一些處理或工作
  })
}

// 製作鈴鐺：建立一個 intersection observer，帶入相關設定資訊
let observer = new IntersectionObserver(callback, options)

// 設定觀察對象：告訴 observer 要觀察哪個目標元素
observer.observe(TARGET_ELEMENT)