IntersectionObserver

IntersectionObserver는 간단히 말해 관찰 대상이 viewport영역에 들어오고 나가는 것 (즉, 가시성)을 감시하는 역할을 한다.

---

사용법)

① new IntersectionObserver(callback[, options]); 생성자로 인스턴스를 생성한다.

② 관찰 대상을 등록해 준다.

  const observer = new IntersectionObserver((entries, observer) => {
    console.log(entries);
  });
  
   observer.observe(targetElem);

---

첫번째 매개변수인 callback 함수는 entries, observer라는 두가지 매개변수를 받는다.
entries -더 보이거나 덜 보이게 되면서 통과한 최소한의 자극을 나타내는 
IntersectionObserverEntry 객체의 배열.
observer - 자신을 호출한 IntersectionObserver.

const observer = new IntersectionObserver((entries, observer)=>{
	 ioIndex = entries[0].target.dataset.index * 1;
},option);

//두번째 매개변수는 '옵저버(즉 가시영역이 되어 줄 대상 - 감시 대상보다 상위 요소)를 
//조정할 수 있는 옵션 객체'를 조정하는 옵션이고 생략가능,
//default는 문서 뷰포트이다.(innerWidth, innerHeight) 
//즉, 여백은 없이 역치는 0(1픽셀이라도 변하면 콜백을 호출)이 됩니다. 

io.observe(element); // 관찰할 대상을 등록하는 과정으로 관찰 대상을 인수로 넣어준다.