해당 요소가 보여졌을때의 이벤트 방법.

기존의 방식은 스크롤 이벤트때 원하는 엘리먼트의 좌표, 스크롤의 위치 등을 구하여 더하고 뺴서 해당 값 이상이거나 이하일때 등의 복잡한 수식을 사용해야 한다.
하지만
IntersectionObserver를 활용하면 그러한 복잡한 이벤트 없이 활용 가능하다.

let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

root는 해당 이벤트를 받아들일 엘리먼트,
roomtmargin은 해당 이벤트를 받아들일 엘리먼트가 보이기 전에 이벤트를 표시하고 싶을때,

그리고 threshhold는 해당 요소가 얼만큼 보였을때 이벤트를 발생시킬지 정하는 수치이다. 0~1사이에서 정하면 된다.

그리고 callback부분에에 해당 이벤트가 발생했을때의 함수를 정의 하여 넣어주면 된다.
대표적으로 사용할 수 있는 것은 aos(aimation on scroll)이다.

다만 IE에선 동작하지 않는것이 큰 단점이다.

하지만 IE가 아예 퇴출될 날이 머지 않았으므로 1~2년 기다렸다가 사용하기로 하자.