IntersectionObserver.js

IntersectionObserver.js

// ประกาศสร้าง instance ของ IntersectionObserver พร้อมบอกด้วยว่า ก่อนแสดงผล 50 pixel ให้ trigger ไปหา callback
const contatiner = document.getElementById('image')
const observer = new IntersectionObserver(onIntersection, {rootMargin: '50px 0px'})

// บอกว่าให้เฝ้า id="image" เอาไว้
observer.observe(contatiner)

function onIntersection (entry) {
  let element = entry[0]
  
  // ถ้า ratio ของ element นั้นมากกว่า 0 ให้แสดงผลและ เลือก
  if(element.intersectionRatio > 0) {
    
    //แสดงผลตรงนี้
    
    //หลังจาก แสดงผลให้เลิก observe element นั้นไป
    observer.unobserve(element.target)
    observer.disconnect()
  }
}