Intersection Observer API

Intersection Observer API

• 비동기적으로 어떤 변화를 감지하는 API
  
  
• 바로 어떤 요소가 부모 컨테이너 안에서나 뷰포트 즉 윈도우 전체의 창 안에서 요소의 intersection을 감지 -> 요소가 정해진 부모 컨테이너 안에 교차가 되는 지를 확인.
  
  
• getBoundingClientRect()을 사용하는 것은 좋지않다.
  
  
• 만약 윈도우 창 안에 많은 페이지의 내용이 들어있다면 사용자에게 보여지는 부분은 일부분이지만 전부 돔요소에 저장되어 있다면 브라우저 메모리를 많이 잡아먹는다. 사용자에게 보여지는 부분은 그대로 두고 보여지지 않는 부분은 잠시 삭제했다가 사용자에게 보여질 때 다시 돔 요소에 보여지는 작업도 가능. --> 성능향상에 좋음
  
  
• 원하는 요소가 특정한 영역에 들어왔을 때 콜백함수를 호출해주는 관찰자
  
  

const target = document.querySelectorAll('#listItem');

const callback = (entries, observer) => {
	};

const observer = new IntersectionObserver(callback, option);
entries.forEach(entry => observer.observe(entry){
    // target element:
    //   entry.boundingClientRect 
    //   entry.intersectionRatio 얼마나 들어와있는지 예를 들면, 90%만 들어와 있다면 0.9
    //   entry.intersectionRect 들어온 포지션과 크기
    //   entry.isIntersecting 요소가 안으로 들어오는 상태라면 true, 윈도우에 있다가 밖으로 나가는 상태라면 false
    //   entry.rootBounds 현재 계산하고 있는 부모의 크기
    //   entry.target
    //   entry.time
 });
// Each entry describes an intersection change for one observed